register()

Create a new type of display object for this core instance.

Description

Create a new type of display object for this core instance. This only registers the display object type, and makes it possible to instantiate the object using the normal syntax core.display.thename().

Arguments

name : String

The name of the new display object type.

properties : Object

Object with special properties and methods for this display object type. It inherits all properties and methods from the base object. Specifying properties or methods here with the same name as in the base object overwrites them for this object type. If the display object is a radial object, you need to specify the property shapeType in this object, with the value "radial".

draw : Function

The function that will be called each time the object will be drawn. This is the function where you do the calls to the native canvas API. The function gets passed two arguments, the canvas context and the core instance. The keyword this refers to the display object itself.

init : String

The name of a method specified in the properties object, that will be called when the object is instantiated. Optional.

Return Value

Display. Returns the display module itself.

Examples

Example 1

We start by creating a new core instance. Then we call the register() method to create our new display object type. We call it myObject and it will have no special properties or methods. In the properties object we specify the shapeType though, just for clarification. Rectangular objects don't actually need to specify this property, since rectangular is the default.

Then we pass in a function as the third argument. This is the function that is going to do the actual drawing. We set canvas as the first argument, since that will refer to the canvas context. Then we start that function with setting some variables. The origin is the position inside of the object that is the registration point. This is where the x and y positions of the object are set to be and also the center point of rotation. beginPath() and closePath() are used to not interfere with other display objects. Then we specify what should be drawn, using checks for the fill and stroke to see what we should draw.

The display object is now registered for the current core instance. Next, we create an instance of our new display object which we add to the canvas.

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc"
});

canvas.display.register("myObject", {
	shapeType: "rectangular"
}, function (canvas) {
	var origin = this.getOrigin(),
		x = this.abs_x - origin.x,
		y = this.abs_y - origin.y,
		width = this.width,
		height = this.height;
		
	canvas.beginPath();
	
	if (this.fill !== "") {
		canvas.fillStyle = this.fill;
		canvas.fillRect(x, y, width, height);
	}
	
	if (this.strokeWidth > 0) {
		canvas.strokeStyle = this.strokeColor;
		canvas.lineWidth = this.strokeWidth;
		canvas.strokeRect(x, y, width, height);
	}
	
	canvas.closePath();
});

var myObj = canvas.display.myObject({
	x: 77,
	y: 150,
	width: 200,
	height: 300,
	fill: "#000",
	stroke: "10px #fff"
});

canvas.addChild(myObj);