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);
 
Search WWH ::




Custom Search