Line

If you want to draw just one line as an object, you can use this display object. It allows you to specify where the line should start and end. After that you can also easily change the length and move the start and end points.

Properties

end : Object

Contains properties x and y for the end point. Setting this moves the end point and changes the x and y properties of the display object to be in the center of the line. Getting the end property allows you to set only one of x and y (line.end.x = 50;) (available since version 2.4.0).

length : Number

The length of the line. Setting this will change the length from the center, which means both the start and end points change.

radius : Number

The radius of the line (from center to end point). Setting this will change the length from the center, which means both the start and end points change.

start : Object

Contains properties x and y for the start point. Setting this moves the start point and changes the x and y properties of the display object to be in the center of the line. Getting the start property allows you to set only one of x and y (line.start.x = 50;) (available since version 2.4.0).

x : Number

Changing this value will also change the start and end positions accordingly.

y : Number

Changing this value will also change the start and end positions accordingly.

Examples

Example 1

We start by creating a new core instance. Then we create a line by specifying the start and end points.

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

var line = canvas.display.line({
	start: { x: 80, y: 60 },
	end: { x: 280, y: 170 },
	stroke: "20px #0aa",
	cap: "round"
});

canvas.addChild(line);

Example 2

We start by creating a new core instance. Then we create a line by specifying the start and end points. We also set up a loop function that will decrease the length of the line until it is 0, and then it will stop the loop. We bind an event handler to the line, that will start the loop when the line is clicked.

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

var line = canvas.display.line({
	start: { x: 80, y: 90 },
	end: { x: 280, y: 360 },
	stroke: "20px #0aa",
	cap: "round"
});

canvas.addChild(line);

canvas.setLoop(function () {
	line.length = Math.floor(line.length) - 2;

	if (line.length <= 0) {
		canvas.timeline.stop();
	}
});

line.bind("click tap", function () {
	canvas.timeline.start();
});