HTML and CSS Reference
In-Depth Information
DisplayList.js
DisplayList is a JavaScript object that will hold a list of items we are displaying on the can-
vas. It will send mouse click events to the items in the list when a user clicks on them on the
canvas. It will function as our “retained mode” for this application.
DisplayList has two properties:
objectList
objectList (array)
A list of the items to display.
theCanvas
Reference to the Canvas context. We need this so that we can find the proper mouse x and
y coordinates when a user clicks on an item in the display list.
The addChild() functionof DisplayList addsanobjecttothe objectList arraybypushing
itintothearray.Alltheitemsin objectList willhavetheir draw() functionscalledwhenthe
displayList draw() function is called:
this
this . addChild = function
function ( child ) {
this
this . objectList . push ( child );
}
The removeChild() function finds the first instance of the object in the display list passed as
a parameter and then removes it from objectList . We do this using the array.indexOf()
method, which finds the first instance of an object in an array and removes it:
this
this . removeChild = function
function ( child ) {
var
var removeIndex = null
null ;
removeIndex = this
this . objectList . indexOf ( child , 0 );
iif ( removeIndex != null
null ) {
this
this . objectList . splice ( removeIndex , 1 );
}
}
The draw() function of DisplayList loops through all the objects in objectList and calls
their draw() functions:
this
this . draw = function
function () {
for
for ( var
var i = 0 ; i < this
this . objectList . length ; i ++ ) {
tempObject = this
this . objectList [ i ];
tempObject . draw ();
}
}
Search WWH ::




Custom Search