Tutorial: Create and format shapes

Create and format shapes

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
}
See also:
vecta.io Early Access