Class: CanvasItem
This is the object that finally is drawn to the canvas. This class only provides a basic object with simple mouse-events (if CANVAS is set accordingly).
It will not provide you with any advanced canvas drawing features. Have a look at the MCD canvas tutorial to learn about basic canvas operations.
Implements
CanvasItem Method: constructor
Syntax
var item = new CanvasItem( options );
Arguments
- options - (object) An object with the options for the Thread.
Options
CanvasItem does not use real MooTools Options (except for the events). I decided against options here because I found it to be cumbersome using this.options.property instead of this.property in the event functions. If you want to use proper Options just put them in the second object and use item.options with Cmorph.
- id - (string, required) The Id of the item.
- interactive - (bool, defaults to false) Set true to make mouse events available to the item.
- events - (object) This must be a separate object inside the options!
Events
Pass the events in a separate object called events inside the options.
- draw - (function) The function to be executed everytime the layer the item lives on is drawn. All your canvas drawing must happen here. Receives Context2dObject as single argument.
- destroy - (function) The function to be executed when the item is destroyed.
- click - (function) The function to be executed when the item is clicked.
- mousemove - (function) …
- mouseover - (function) …
- mouseout - (function) …
- dblclick - (function) …
Returns
- (object) The new Item.
Notes
The id of the item should not contain "/" because each item gets a property called fullid that stores the id of the layer the item lives on and the items own id separated by a forward slash.
Keyboard events? There are no built-in keyboard events. Use Element.Events to capture keyboard input.
All mouse-related events get the mouse's X and Y coordinate passed as arguments.
All options are easy to animate using Cmorph.
Please avoid the key "dims" as it is reserved for the item's dimensions.
When the mouse exits the canvasElement and an item is still being dragged the mouseup event for that item is fired. Likewise the mouseout event is fired when there still is a current item that mouse is over.
For a drag'n'drop example please see the examples.
Example
var item = new CanvasItem({
id : 'myItem',
x : 10,
y : 10,
w : 20,
h : 20,
scale : 1,
fillStyle : 'rgba(0,0,0,0.5)',
interactive : true,
events : {
onDraw : function( ctx )
{
ctx.fillStyle = this.fillStyle;
ctx.fillRect(
this.x,
this.y,
this.w * this.scale,
this.h * this.scale
);
this.setDims(
this.x,
this.y,
this.w * this.scale,
this.h * this.scale
);
},
onMouseover : function(x,y)
{
this.fillStyle = 'rgba(0,0,0,1)';
},
onMouseout : function(x,y)
{
this.fillStyle = 'rgba(0,0,0,0.5)';
},
onClick : function(x,y)
{
this.scale += 0.1;
}
}
});
CANVAS.layers.get('someLayer').add(item);
CanvasItem Method: setDims
Sets the dimensons of the item that will be used for mouse events. Only supports rectangles. If you need more complex operations you should have a look at CANVAS.findTarget and CANVAS.contains etc.
Syntax
item.setDims( x, y, w, h );
or
item.setDims( dimensions );
or
item.setDims( );
Arguments
- 4 numbers (x,y,width,height)
- array([x,y,width,height])
- nothing
Returns
- (null)
Notes
If you pass no value the function will attempt to find the values inside the object itself. It will try the following properties: x,left,y,top,w,width,h,height. If one property is not found the function will return false. Otherwise item.dims will be set to [x,y,w,h].
CanvasItem Method: draw
Fires the item's draw-event.
Syntax
item.draw( canvasContext );
Arguments
- canvasContext - (object, required) The canvasContext to draw the Item on.
Returns
- (null)
CanvasItem Method: destroy
Fires the item's destroy-event.
Syntax
item.destroy( );
Returns
- (null)
CanvasItem Method: getLayer
Returns the Layer that item is associated with.
Syntax
item.getLayer( );
Returns
- layer - (object) The layer on which the item lives