setOrigin()

Set the object's origin.

Description

Set the object's origin to the specified values. This point acts as a center point for rotation. It is also the coordinates where the x and y properties are drawn to. If origin.x is 10, the object's left edge will be drawn 10 px to the left of the x property. Values for the origin can be either a number (negative or positive, both work) or one of the predefined keywords listed in the arguments.

Arguments

x : Number or String

A number which represents the horizontal offset in pixels that the object should be drawn with. Also accepts some keywords specified as a string: left, center or right.

y : Number or String

A number which represents the vertical offset in pixels that the object should be drawn with. Also accepts some keywords specified as a string: top, center or bottom.

Return Value

displayObject. Returns the display object itself.

Examples

Example 1

We create a new core instance and a rectangle that we add to the canvas. Then we add an event handler that sets the origin of the object when clicked, which will make the rectangle adjust the position to reflect the changed origin. If you would like it to be in the same visual position, but with changed origin, you would need to calculate the new positions yourself.

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

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 70,
	width: 200,
	height: 100,
	fill: "#000"
});

canvas.addChild(rectangle);

rectangle.bind("click tap", function () {
	this.setOrigin("center", "center");
	canvas.redraw();
});