HTML and CSS Reference
In-Depth Information
For more vector drawing opions, refer to the graphics
documentaion at
http://createjs.com/Docs/EaselJS/
classes/Graphics.html
.
Class inheritance
In EaselJS, it follows the tradiional class-based object-oriented programming approach.
So how does class inheritance work in EaselJS? Take our project as an example.
We need to have a class,
RectShape
, dedicated to draw a rectangular shape. We define it
as a kind of
Container
(or we can say we will extend it from
Container
) that will contain
a
Shape
object that draws a rectangle, which is shown as follows:
RectShape.prototype = Object.create(createjs.Container.prototype);
You may wonder why we use
Container
here instead of using
Shape
directly. It is because
of the extensibility. We may need to add more things to the rectangular shape later, say a
numbered text. Making it
Container
at an early stage ensures that there will be no need
to change the code from
Shape
to
Container
later.
Container
The Container class is the most generic class that extends DisplayObject. It contains other
display objects too. For example, a solar system can be a container that contains the sun,
the earth, and other planets. For earth, it can also be a container that contains the bitmap
of the earth and a moon bitmap graphics.
Often, game objects are composited by smaller parts; thus, we have Container. From the
solar system example, we know that containers can be put inside another container.
It's worth noing that a stage is actually one special kind of container.
Chaining the prototype and inheritance
JavaScript is a prototype-based language. We extend an object's abiliies by chaining the
prototype. The following code shows how we chain the
Container
object's prototype to
our
RectShape
class:
RectShape.prototype = Object.create(createjs.Container.prototype);