The following examples, shows how to create and format shapes using plugins. Most of the examples are designed to be copied (just click on the code) and pasted into your own plugin. To understand how to use plugins, see Using plugins.
Create circles, and format them
In this example, we are going to create progressively bigger circles, spaced equally and format them with some colors.
var i = 0,
size = 50, //initial size
spacing = 20, //spacing 20px
pos = {x: 10, y: 10}; //initial position of the first circle
for (; i < 5; i++) {
//Shapes can only be drawn on pages, so we get a reference to the active page
//and provide the initial position, in addition to the width and height of the circle
Vecta.activePage.drawEllipse(pos.x, pos.y, size, size)
.strokeWidth(3)
.stroke('#2196F3')
.fill('#FFC107');
pos.x += size + spacing; //increase next position to size + spacing
size += 10; //increase the size
}
See also:
Creating paths and line ends with units
var i = 0,
spacing = 100,
pos = {x: 10, y: 90},
arrows = ['thick', 'thin', 'thickline', 'thinline', 'dot'], //various line end keywords
shape;
for (; i < 5; i++) {
//Draw a path using path segment list
shape = Vecta.activePage.drawPath([
{type: 'M', x: pos.x, y: pos.y},
{type: 'L', x: pos.x + 80, y: pos.y - 80}
]);
//Set the arrow ends, stroke, and set the length to exactly 30mm
shape.endArrow(arrows[i])
.strokeWidth(3)
.length('30mm');
pos.x += spacing; //increase the spacing
}