Shape

.angle([angle]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.angle(45); //set angle to 45 degrees
console.log(shape.angle()); //45

.back() Returns: Vecta.Shape

Arrange a shape back or behind.

.backward() Returns: Vecta.Shape

Arrange a shape backward.

.begin([x], [y]) Returns: Object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y:100}]);

shape.begin(50, 50); //move the begin point to 50px by 50px
console.log(shape.begin()); //{x: 50, y: 50}
shape.begin('1in'); //move begin point to 1 inch by 50px. Because y is not provided, current value 50px is used.
console.log(shape.begin()); //{x: '1in', y: 50}
shape.begin('1in', '1in'); //move the begin point to 1 inch by 1 inch
console.log(shape.begin()); //{x: '1in', y: '1in'}

.beginArrow([id]) Returns: Vecta.Shape|string|null

Name	Type	Attributes	Description
id	string|null	optional	The id of the arrow to set or undefined to get. Arrow ids can be any of the following: If id === null, end arrow will be removed, and defaults to no arrows. If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

console.log(shape.beginArrow()); //null
shape.beginArrow('thick'); //set to thick end arrow
console.log(shape.beginArrow()); //"thick"
shape.beginArrow(null); //remove the arrow
console.log(shape.beginArrow()); //null

.beginConnect([target]) Returns: object|Vecta.Shape

Returns:

.beginSize([size]) Returns: number|null|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

shape.beginArrow('thick').beginSize(2); //set to thick arrow and size 2
console.log(shape.beginSize()); //2
shape.beginSize(null); //reset to default size 1
console.log(shape.beginSize()); //1

.beginU([unit], [format]) Returns: Object

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y:100}]);

shape.begin('1in', '1in'); //move begin point to 1 inch by 1 inch
console.log(shape.beginU()); //{x: 96, y: 96}
console.log(shape.beginU('in')); //{x: 1, y: 1}
console.log(shape.beginU('mm', '0.0mm')); //{x: '25.4mm', y: '25.4mm'}

.beginXU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y:100}]);

shape.begin('1in', '1in'); //move begin point to 1 inch by 1 inch
console.log(shape.beginXU()); //96
console.log(shape.beginXU('in')); //1
console.log(shape.beginXU('mm', '0.0mm')); //'25.4mm'

.beginYU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y:100}]);

shape.begin('1in', '1in'); //move begin point to 1 inch by 1 inch
console.log(shape.beginYU()); //96
console.log(shape.beginYU('in')); //1
console.log(shape.beginYU('mm', '0.0mm')); //'25.4mm'

.bevel([bevel]) Returns: Vecta.Shape|object

Returns:

.blur([deviation]) Returns: Vecta.Shape|object

Returns:

.box() Returns: object

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, '10mm', '10mm');

console.log(shape.box()); //{x: 0, y: 0, width: 37.7952766418457, height: 37.7952766418457}

.center([x], [y]) Returns: Object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.center(10, 10); //center the shape to 10px by 10px
console.log(shape.center()); //{x: 10, y: 10}
shape.center('1in'); //center shape to 1 inch by 10px. Because y is not provided, current value 10px is used.
console.log(shape.center()); //{x: '1in', y: 10}
shape.center('1in', '1in'); //center the shape to 1 inch by 1 inch
console.log(shape.center()); //{x: '1in', y: '1in'}

.centerU([unit], [format]) Returns: Object

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.center('1in', '1in'); //move shape to 1 inch by 1 inch
console.log(shape.centerU()); //{x: 96, y: 96}
console.log(shape.centerU('in')); //{x: 1, y: 1}
console.log(shape.centerU('mm')); //{x: 25.399999293486296, y: 25.399999293486296}
console.log(shape.centerU('mm', '0.0mm')); //{x: '25.4mm', y: '25.4mm'}

.clip(shape)

.connectedShapes() Returns: Array

Returns:

.connectionPointsOnly([state]) Returns: boolean|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

console.log(shape.connectionPointsOnly()); // false
shape.connectionPointsOnly(true);
console.log(shape.connectionPointsOnly()); // true

.connects([id]) Returns: Vecta.Connect[]|Vecta.Connect|null

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

//create a new connection point
new Vecta.Connect(null, shape);

//get the connection points count
console.log(shape.connects().length) //1

.controls([index]) Returns: Vecta.Control[]|Vecta.Control|null

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50),
    control = new Vecta.Control(shape);

console.log(shape.controls()) // [Vecta.Control]
console.log(shape.controls(0)) // Vecta.Control {shape: Vơ.Shape, index: 0}

.cxU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.center('1in', '1in'); //move shape to 1 inch by 1 inch
console.log(shape.cxU()); //96
console.log(shape.cxU('in')); //1
console.log(shape.cxU('mm')); //25.399999293486296
console.log(shape.cxU('mm', '0.0mm')); //'25.4mm'

See also:

• Vecta.Shape.centerU

.cyU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.center('1in', '1in'); //move shape to 1 inch by 1 inch
console.log(shape.cyU()); //96
console.log(shape.cyU('in')); //1
console.log(shape.cyU('mm')); //25.399999293486296
console.log(shape.cyU('mm', '0.0mm')); //'25.4mm'

See also:

• Vecta.Shape.centerU

.delete()

.end([x], [y]) Returns: Object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y:100}]);

shape.end(50, 50); //move the end point to 50px by 50px
console.log(shape.end()); //{x: 50, y: 50}
shape.end('1in'); //move end point to 1 inch by 50px. Because y is not provided, current value 50px is used.
console.log(shape.end()); //{x: '1in', y: 50}
shape.end('1in', '1in'); //move the end point to 1 inch by 1 inch
console.log(shape.end()); //{x: '1in', y: '1in'}

.endArrow([id]) Returns: number|null|Vecta.Shape

Name	Type	Attributes	Description
id	string|null	optional	The id of the arrow to set or undefined to get. Arrow ids can be any of the following: If id === null, end arrow will be removed, and defaults to no arrows. If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

console.log(shape.endArrow()); //null
shape.endArrow('thick'); //set to thick end arrow
console.log(shape.endArrow()); //"thick"
shape.endArrow(null); //remove the arrow
console.log(shape.endArrow()); //null

.endConnect([target]) Returns: object|Vecta.Shape

Returns:

.endSize([size]) Returns: number|null|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

shape.endArrow('thick').endSize(2); //set to thick arrow and size 2
console.log(shape.endSize()); //2
shape.endSize(null); //reset to default size 1
console.log(shape.endSize()); //1

.endU([unit], [format]) Returns: Object

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y:100}]);

shape.end('1in', '1in'); //move end point to 1 inch by 1 inch
console.log(shape.endU()); //{x: 96, y: 96}
console.log(shape.endU('in')); //{x: 1, y: 1}
console.log(shape.endU('mm', '0.0mm')); //{x: '25.4mm', y: '25.4mm'}

.endXU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y:100}]);

shape.end('1in', '1in'); //move end point to 1 inch by 1 inch
console.log(shape.endXU()); //96
console.log(shape.endXU('in')); //1
console.log(shape.endXU('mm', '0.0mm')); //'25.4mm'

.endYU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y:100}]);

shape.end('1in', '1in'); //move begin point to 1 inch by 1 inch
console.log(shape.endYU()); //96
console.log(shape.endYU('in')); //1
console.log(shape.endYU('mm', '0.0mm')); //'25.4mm'

.fill([fill]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fill('#f00'); //set to red
shape.fill('#00ff00'); //set to green
shape.fill('rgb(0, 0, 255)'); //set to blue
shape.fill('aqua');
console.log(shape.fill()); //#00ffff
//Use style method to set multiple styles
shape.style({fill: '#000', 'stroke-width': 2}); //set to black fill and stroke width === 2

See also:

• Vecta.Shape.style

.fillOpacity([opacity]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fillOpacity(0.1); //set to 10% opacity, which is equivalent to 90% transparency
console.log(shape.fillOpacity()); //0.1
//Use style method to set multiple styles
shape.style({fill: '#000', 'fill-opacity': 0.5}); //set to black fill and fill opacity === 0.5

See also:

• Vecta.Shape.style

.flipHoriz([flipped]) Returns: boolean|Vecta.Shape

Get or set a shape horizontally.

Returns:

Examples:

//Create an ellipse and a triangle and group them
var shape = Vecta.selection.add([
        Vecta.activePage.drawEllipse(0, 0, 50, 50),
        Vecta.activePage.drawPath([
            {type: 'M', x: 75, y: 0},
            {type: 'L', x: 50, y: 50},
            {type: 'L', x: 100, y: 50},
            {type: 'Z'}])
    ]).group();

shape.flipHoriz(true); //flip horizontally
shape.flipHoriz(false); //reset horizontal flip
shape.flipHoriz(); //returns false

.flipVerti([flipped]) Returns: boolean|Vecta.Shape

Get or set a shape to flip vertically.

Returns:

Examples:

//Create an ellipse and a triangle and group them
var shape = Vecta.selection.add([
        Vecta.activePage.drawEllipse(0, 0, 50, 50),
        Vecta.activePage.drawPath([
            {type: 'M', x: 75, y: 0},
            {type: 'L', x: 50, y: 50},
            {type: 'L', x: 100, y: 50},
            {type: 'Z'}])
    ]).group();

shape.flipVerti(true); //flip shape vertically
shape.flipVerti(); //returns true since we have flipped now.
shape.flipVerti(false); //reset vertical flip
shape.flipVerti(); //returns false since it is now reset.

.flowText() Returns: Vecta.Shape

Examples:

var shape = Vecta.activePage.drawEllipse(0, 0, 200, 200);

shape.text('test');
shape.flowText();

.fontFamily([font], [skip_subs]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fontFamily('Roboto Condensed');
console.log(shape.fontFamily()); //"Roboto Condensed"
//Use style method to set multiple styles
shape.style({fill: '#000', 'font-family': 'Roboto Condensed'}); //set to black fill and font === Roboto Condensed

See also:

• Vecta.Shape.style

.fontFill([fill], [skip_subs]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fontFill('#f00'); //set to red
shape.fontFill('#00ff00'); //set to green
shape.fontFill('rgb(0, 0, 255)'); //set to blue
shape.fontFill('aqua');
console.log(shape.fontFill()); //#00ffff
//Use style method to set multiple styles
shape.style({font-fill: '#000', 'stroke-width': 2}); //set to black font fill and stroke width === 2

See also:

• Vecta.Shape.style

.fontOpacity([opacity], [skip_subs]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fontOpacity(0.1); //set to 10% opacity, which is equivalent to 90% transparency
console.log(shape.fontOpacity()); //0.1
//Use style method to set multiple styles
shape.style({fill: '#000', 'font-opacity': 0.5}); //set to black fill and font opacity === 0.5

See also:

• Vecta.Shape.style

.fontSize([size], [skip_subs]) Returns: number|string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fontSize(18); //set to 18 px
console.log(shape.fontSize()); //18
shape.fontSize('18pt'); //set to 18pt
//Use style method to set multiple styles
shape.style({fill: '#000', 'font-size': '18pt'}); //set to black fill and font size === 18pt

See also:

• Vecta.Shape.style

.fontStyle([style], [skip_subs]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fontStyle('italic'); //set to italic
console.log(shape.fontStyle()); //"italic"
//Use style method to set multiple styles
shape.style({fill: '#000', 'font-style': 'italic'}); //set to black fill and font style === italic

See also:

• Vecta.Shape.style

.fontWeight([weight], [skip_subs]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fontWeight('bold'); //set to bold
console.log(shape.fontSize()); //18
shape.fontSize('18pt'); //set to 18pt
//Use style method to set multiple styles
shape.style({fill: '#000', 'font-size': '18pt'}); //set to black fill and font size === 18px

See also:

• Vecta.Shape.style

.formula([field], [form]) Returns: string|Promise

Returns:

Examples:

//Constant value
var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.formula('size.width', 100).then(function () {
    console.log('Formula:' + shape.formula('size.width') + ', Value:' + shape.widthU()) //Formula:100, Value:100
});

//Own fields
var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.formula('size.width', 'this.heightU()').then(function () {
    console.log('Formula:' + shape.formula('size.width') + ', Value:' + shape.widthU()) //Formula:this.heightU(), Value:50
});

//Other shapes
var shapeA = Vecta.activePage.drawRect(0, 0, 50, 50),

shapeB = Vecta.activePage.drawRect(0, 200, 50, 50);
shapeA.name('A');
shapeB.formula('size.width', '$.shape("A").widthU()').then(function () {
    shapeA.size(100);
});

.forward() Returns: object

Arrange a shape forward.

.front() Returns: object

Arrange a shape to the front.

.getStyledText() Returns: object[]

Returns:

.globalize(x, y, [target]) Returns: object

Returns:

.glow([glow]) Returns: Vecta.Shape|object

Returns:

.handles([show]) Returns: boolean|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

console.log(shape.handles()); //true
shape.handles(false);
console.log(shape.handles()); //false

.heightU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.size('1in', '1in'); //resize shape to 1 inch by 1 inch
console.log(shape.heightU()); //96
console.log(shape.heightU('in')); //1
console.log(shape.heightU('mm')); //25.399999293486296
console.log(shape.heightU('mm', '0.0mm')); //'25.4mm'

See also:

• Vecta.Shape.sizeU

.hidden([state]) Returns: boolean|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

console.log(shape.hidden()); //false
shape.hidden(true); //set shape to hidden
console.log(shape.hidden()); //true

.id() Returns: string

Returns:

.increment([val])

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50),
    clone;

shape.text(1);
shape.increment(true);
console.log(shape.increment()); //true

clone = Vecta.activePage.clone(shape)[0];
console.log(clone.text()); //2

.insertShape(shape) Returns: Vecta.Shape

Returns:

Examples:

var shape1 = Vecta.activePage.drawRect(0, 0, 100, 100),
    shape2 = Vecta.activePage.drawRect(100, 100, 100, 100),
    shape3 = Vecta.activePage.drawRect(200, 200, 100, 100),
    group = new Vecta.Selection([shape1, shape2]).group();

    console.log(group.insertShape(shape3)); // shape3 will be added to the group shape

.isChild() Returns: boolean

Examples:

var shape_1 = Vecta.activePage.drawRect(0, 0, 50, 50),
    shape_2 = Vecta.activePage.drawRect(50, 50, 100, 100),
    group = Vecta.selection.add([shape_1, shape_2]).group(); //group the 2 rectangle

console.log(shape_1.isChild()); //true
console.log(group.isChild()); //false

.isConnector() Returns: boolean

Examples:

//select a shape, and check if it is a connector
var shape = Vecta.selection.shapes();

console.log(shape[0].isConnector());

.isGroup() Returns: boolean

Examples:

//add 2 shapes into selection object and group them, returning the grouped shape
var shape = Vecta.selection.add([
    Vecta.activePage.drawRect(0, 0, 50, 50),
    Vecta.activePage.drawRect(50, 50, 100, 100)
]).group();

console.log(shape.isGroup()); //true

.json([json]) Returns: object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.json({a: 1, b: 2});
console.log(shape.json()); // {a: 1, b: 2}

.layer([id]) Returns: Vecta.Layer|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.layer(); //Returns Vecta.Layer object for default layer
shape.layer('test_layer'); //test_layer automatically created and shape assigned to test_layer
new Vecta.Layer('test_layer').hidden(true); //hide test_layer, shape is now hidden
shape.layer(null); //remove layer from shape, so shape is now visible as it is assigned to default layer

.length([len]) Returns: number|string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

console.log(shape.length()); //141.42135620117188
shape.length('1in'); //set length to 1 inch
console.log(shape.length()); //"1in"

.lengthU([unit], [format]) Returns: number|string

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 72, y:65 }]);

console.log(shape.lengthU()); //97
console.log(shape.lengthU('in')); //1.0104166666666667
console.log(shape.lengthU('mm')); //25.664582619460113
console.log(shape.lengthU('mm', '0.0mm')); //25.7mm

.lineSpacing([space]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Vecta\nVecta');  //Shape must contain text
shape.lineSpacing(2); //set to 2 of line-spacing.
console.log(shape.lineSpacing()); //2
//Use style method to set multiple styles
shape.style({textStroke: '#000', textStrokeOpacity: 0.5, lineSpacing: 2}); //set to black stroke and stroke opacity === 0.5
and line-spacing to 2

See also:

• Vecta.Shape.style

.links([links]) Returns: Object[]|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.links([{ url: 'https://vecta.io' }]);
shape.links([{ url: 'https://vecta.io', desc: 'Vecta' }, { url: 'https://www.youtube.com/', desc: 'Youtube' }]);
shape.links([{ sub_url: 'page_id/shape_id', desc: 'Link to a shape within the drawing' }]);

.localize(x, y, [source]) Returns: object

Returns:

.locked([state]) Returns: boolean|Vecta.Shape

Returns:

.markerEnd([marker_id]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

console.log(shape.markerEnd()); //null
shape.markerEnd('dual_slash', true); //set to dual slash marker
console.log(shape.markerEnd()); //"dual_slash"
shape.markerEnd(null); //remove the start marker
console.log(shape.markerEnd()); //null

.markerMid([marker_id], [repeat]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

console.log(shape.markerMid()); //null
shape.markerMid('dual_slash', true); //set to dual slash marker
console.log(shape.markerMid()); //"dual_slash"
shape.markerMid(null); //remove the start marker
console.log(shape.markerMid()); //null

.markerStart([marker_id]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

console.log(shape.markerStart()); //null
shape.markerStart('dual_slash'); //set to dual slash marker
console.log(shape.markerStart()); //"dual_slash"
shape.markerStart(null); //remove the start marker
console.log(shape.markerStart()); //null

.menus([index]) Returns: object

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);
new Vecta.Menu(shape);
console.log(shape.menus()); //[Vecta.Menu]

.move([x], [y]) Returns: Object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.move(10, 10); //move the shape to 10px by 10px
console.log(shape.move()); //{x: 10, y: 10}
shape.move('1in'); //move shape to 1 inch by 10px. Because y is not provided, current value 10px is used.
console.log(shape.move()); //{x: '1in', y: 10}
shape.move('1in', '1in'); //move the shape to 1 inch by 1 inch
console.log(shape.move()); //{x: '1in', y: '1in'}

.moveU([unit], [format]) Returns: Object

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.move('1in', '1in'); //move shape to 1 inch by 1 inch
console.log(shape.moveU()); //{x: 96, y: 96}
console.log(shape.moveU('in')); //{x: 1, y: 1}
console.log(shape.moveU('mm')); //{x: 25.399999293486296, y: 25.399999293486296}
console.log(shape.moveU('mm', '0.0mm')); //{x: '25.4mm', y: '25.4mm'}

.name([name]) Returns: string|Vecta.Shape

Returns:

Examples:

var shapeA = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.name('A');
console.log(shape.name()) //A
var shapeA2 = Vecta.activePage.drawRect(50, 50, 100, 100);
shape.name('A');
console.log(shape.name()) //A.xxxxxxxx

.page() Returns: Vecta.Page

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

console.log(shape.page().id()); //displays the shape's containing page id

.parent() Returns: null|Vecta.Shape

Returns:

Examples:

var shape_1 = Vecta.activePage.drawRect(0, 0, 50, 50),
    shape_2 = Vecta.activePage.drawRect(50, 50, 100, 100),
    group = Vecta.selection.add([shape_1, shape_2]).group(); //group the 2 rectangle

//get the parent, then the children shape count
console.log(shape_1.parent().shapes().length); //2

.parents() Returns: Vecta.Shape[]

Returns:

Examples:

var shape_1 = Vecta.activePage.drawRect(0, 0, 50, 50),
    shape_2 = Vecta.activePage.drawRect(50, 50, 100, 100),
    group = Vecta.selection.add([shape_1, shape_2]).group(); //group the 2 rectangle

//get the parents count
console.log(shape_1.parents().length); //1 because shape_1 is a child shape of a group, and have only 1 parent.

.pathList([list]) Returns: PathList[]|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]);

//get and display the path list
console.log(shape.pathList()); //[{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}]
//set to new path list
shape.pathList([{type: 'M', x: 0, y: 0}, {type: 'L', x: 100, y: 100}, {type: 'L', x: 200, y: 0}]);

.resetAspectRatio() Returns: Promise

.rounded([radius]) Returns: number|string|null|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.rounded(10); //set to rounded 10 pixels
console.log(shape.rounded()); //10
shape.rounded('1in');
console.log(shape.rounded()); //1in

.shadow([shadow]) Returns: Vecta.Shape|object

Returns:

.shape(name, [all]) Returns: null|Vecta.Shape|Vecta.Shape[]

Returns:

See also:

• Vecta.Page.shape

.shapes() Returns: Vecta.Shape[]

Returns:

Examples:

var shape_1 = Vecta.activePage.drawRect(0, 0, 50, 50),
    shape_2 = Vecta.activePage.drawRect(50, 50, 100, 100),
    group = Vecta.selection.add([shape_1, shape_2]).group(); //group the 2 rectangle

//get the children shape count
console.log(shape_1.parent().shapes().length); //2

.showAlignBox([show]) Returns: boolean|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

console.log(shape.showAlignBox()); //false
shape.showAlignBox(true);
console.log(shape.handles()); //true

.size([width], [height]) Returns: Object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.size(100, 100); //resize the shape to 100px by 100px
console.log(shape.size()); //{width: 100, height: 100}
shape.size('1in'); //resize shape to 1 inch by 100px. Because height is not provided, current value 100px is used.
console.log(shape.size()); //{width: '1in', height: 100}
shape.size('1in', '1in'); //resize the shape to 1 inch by 1 inch
console.log(shape.size()); //{width: '1in', height: '1in'}

.sizeU([unit], [format]) Returns: Object

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.size('1in', '1in'); //resize shape to 1 inch by 1 inch
console.log(shape.sizeU()); //{width: 96, height: 96}
console.log(shape.sizeU('in')); //{width: 1, height: 1}
console.log(shape.sizeU('mm')); //{width: 25.399999293486296, height: 25.399999293486296}
console.log(shape.sizeU('mm', '0.0mm')); //{width: '25.4mm', height: '25.4mm'}

.skewX([angle]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);
shape.skewX(45); //set angle to 45 degrees
console.log(shape.skewX()); //45

.skewY([angle]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);
shape.skewY(45); //set angle to 45 degrees
console.log(shape.skewY()); //45

.spatialNeighbors(radius, [center]) Returns: Vecta.Shape[]

Returns:

.startOffset([value]) Returns: number|Vecta.Shape

Returns:

.stroke([stroke]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.stroke('#f00'); //set to red
shape.stroke('#00ff00'); //set to green
shape.stroke('rgb(0, 0, 255)'); //set to blue
shape.stroke('aqua');
console.log(shape.stroke()); //#00ffff
//Use style method to set multiple styles
shape.style({stroke: '#000', 'stroke-width': 2}); //set to black stroke and stroke width === 2

See also:

• Vecta.Shape.style

.strokeDashArray([dash]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.strokeDashArray('2 2');
console.log(shape.strokeDashArray()); //2 2
shape.strokeDashArray('1mm 1mm');
console.log(shape.strokeDashArray()); //'1mm 1mm'
//Use style method to set multiple styles
shape.style({stroke: '#000', 'stroke-dasharray': '2 2'}); //set to black stroke and stroke dasharray === '2 2'

See also:

• Vecta.Shape.style

.strokeDashOffset([offset]) Returns: number|Vecta.Shape

Returns:

.strokeLineCap([cap]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.strokeLineCap('butt');
console.log(shape.strokeLineCap()); //"butt"
//Use style method to set multiple styles
shape.style({stroke: '#000', 'stroke-linecap': 'butt'}); //set to black stroke and stroke linecap === 'butt'

See also:

• Vecta.Shape.style

.strokeLineJoin([join]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.strokeLineJoin('miter');
console.log(shape.strokeLineJoin()); //"miter"
//Use style method to set multiple styles
shape.style({stroke: '#000', 'stroke-linejoin': 'miter'}); //set to black stroke and stroke linejoin === 'miter'

See also:

• Vecta.Shape.style

.strokeOpacity([opacity]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.strokeOpacity(0.1); //set to 10% opacity, which is equivalent to 90% transparency
console.log(shape.strokeOpacity()); //0.1
//Use style method to set multiple styles
shape.style({stroke: '#000', 'stroke-opacity': 0.5}); //set to black stroke and stroke opacity === 0.5

See also:

• Vecta.Shape.style

.strokeWidth([width]) Returns: number|string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.strokeWidth(2); //set to 2 px
console.log(shape.strokeWidth()); //2
shape.strokeWidth('1mm'); //set to 1mm
console.log(shape.strokeWidth()); //'1mm'
//Use style method to set multiple styles
shape.style({stroke: '#000', 'stroke-width': 2}); //set to black stroke and stroke width === 2

See also:

• Vecta.Shape.style

.style(attr, [value]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.fill('blue');
shape.style('fill'); //'blue'. Read the fill style.
shape.style('fill', 'red'); //Set the fill to 'red'
shape.style({ fill: 'red', 'stroke-width': 3}); //set fill to 'red' and stroke width to 3

.symType([val]) Returns: string

Returns:

.text([txt], [trim_text]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Let\'s add some text');
console.log(shape.text()); //"Let's add some text"

//set bold to 'some'
shape.text([{text: 'Let\'s add '}, {text: 'some', styles:{'font-weight': 'bold'}}, {text: ' text'}]);

var styled_text = shape.getStyledText();

console.log(styled_text);
// [{text: 'Let\'s add '}, {text: 'some', styles:{'font-weight': 'bold'}}, {text: ' text'}]

// Set font color of 'Let's add' to 'red'
styled_text[0].styles = {'font-fill': 'red'};
shape.text(styled_text);

console.log(shape.getStyledText());
// [{text: 'Let's add ', styles: {'font-fill': 'red'}}, {text: 'some', styles:{'font-weight': 'bold'}}, {text: ' text'}]

.textAlign([align], [skip_subs]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.textAlign('top');
console.log(shape.textAlign()); //"top"
//Use style method to set multiple styles
shape.style({fill: '#000', 'text-align': 'top'}); //set to black fill and text align === top

See also:

• Vecta.Shape.style

.textAnchor([anchor], [skip_subs]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.textAnchor('start');
console.log(shape.textAnchor()); //"start"
//Use style method to set multiple styles
shape.style({fill: '#000', 'text-anchor': 'middle'}); //set to black fill and text anchor === middle

See also:

• Vecta.Shape.style

.textBevel([bevel]) Returns: Vecta.Shape|object

Returns:

.textBlur([deviation]) Returns: Vecta.Shape|object

Returns:

.textDecoration([decor], [skip_subs]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.textDecoration('underline');
console.log(shape.textDecoration()); //"underline"
//Use style method to set multiple styles
shape.style({fill: '#000', 'text-decoration': 'underline'}); //set to black fill and text decoration === underline

See also:

• Vecta.Shape.style

.textGlow([glow]) Returns: Vecta.Shape|object

Returns:

.textHeight() Returns: number

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('first row text\nsecond row text'); //add 2 rows of text
console.log(shape.textHeight()); //30.8

.textHidden([state]) Returns: boolean|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

console.log(shape.textHidden()); //false
shape.textHidden(true); //set shape text to hidden
console.log(shape.textHidden()); //true

.textShadow([shadow]) Returns: Vecta.Shape|object

Returns:

.textStrikeThrough([style], [skip_subs]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.textStrikeThrough('line-through');
console.log(shape.textStrikeThrough()); //"line-through"
//Use style method to set multiple styles
shape.style({fill: '#000', 'text-strike-through': 'line-through'}); //set to black fill and text strikethrough === line-through

See also:

• Vecta.Shape.style

.textStroke([stroke], [skip_subs]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Vecta'); //Shape must contain text
shape.textStroke('#f00'); //set to red
shape.textStroke('#00ff00'); //set to green
shape.textStroke('rgb(0, 0, 255)'); //set to blue
shape.textStroke('aqua');
console.log(shape.textStroke()); //#00ffff
//Use style method to set multiple styles
shape.style({textStroke: '#000', textStrokeWidth: 2}); //set to black stroke and stroke width === 2

See also:

• Vecta.Shape.style

.textStrokeOpacity([opacity], [skip_subs]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Vecta');  //Shape must contain text
shape.textStrokeOpacity(0.1); //set to 10% opacity, which is equivalent to 90% transparency
console.log(shape.textStrokeOpacity()); //0.1
//Use style method to set multiple styles
shape.style({textStroke: '#000', textStrokeOpacity: 0.5}); //set to black stroke and stroke opacity === 0.5

See also:

• Vecta.Shape.style

.textStrokeWidth([width], [skip_subs]) Returns: number|string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Vecta'); //Shape must contain text
shape.textStrokeWidth(2); //set to 2 px
console.log(shape.textStrokeWidth()); //2
shape.textStrokeWidth('1mm'); //set to 1mm
console.log(shape.textStrokeWidth()); //'1mm'
//Use style method to set multiple styles
shape.style({textStroke: '#000', textStrokeWidth: 2}); //set to black stroke and stroke width === 2

See also:

• Vecta.Shape.style

.textWidth() Returns: number

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('first row text\nsecond row text'); //add 2 rows of text
console.log(shape.textWidth()); //141.5756378173828

.toPath() Returns: Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100); //Create a rectangle shape

shape.toPath(); //Convert rectangle to paths

.txtAngle([angle]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Add some text into the shape');
shape.txtAngle(45); //set angle to 45 degrees
console.log(shape.txtAngle()); //45

.txtCXU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.txtCenter('1in', '1in'); //move shape to 1 inch by 1 inch
console.log(shape.txtCXU()); //96
console.log(shape.txtCXU('in')); //1
console.log(shape.txtCXU('mm')); //25.399999293486296
console.log(shape.txtCXU('mm', '0.0mm')); //'25.4mm'

See also:

• Vecta.Shape.txtCenterU

.txtCYU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.txtCenter('1in', '1in'); //move shape to 1 inch by 1 inch
console.log(shape.txtCYU()); //96
console.log(shape.txtCYU('in')); //1
console.log(shape.txtCYU('mm')); //25.399999293486296
console.log(shape.txtCYU('mm', '0.0mm')); //'25.4mm'

See also:

• Vecta.Shape.txtCenterU

.txtCenter([x], [y]) Returns: Object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Add some text into the shape');
shape.txtCenter(10, 10); //move the text block center to 10px by 10px
console.log(shape.txtCenter()); //{x: 10, y: 10}
shape.txtCenter('1in'); //move text block to 1 inch by 10px. Because y is not provided, current value 10px is used.
console.log(shape.txtCenter()); //{x: '1in', y: 10}
shape.txtCenter('1in', '1in'); //move the text block to 1 inch by 1 inch
console.log(shape.txtCenter()); //{x: '1in', y: '1in'}

.txtCenterU([unit], [format]) Returns: Object

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Add some text into the shape');
shape.txtCenter('1in', '1in'); //move text block  to 1 inch by 1 inch
console.log(shape.txtCenterU()); //{x: 96, y: 96}
console.log(shape.txtCenterU('in')); //{x: 1, y: 1}
console.log(shape.txtCenterU('mm')); //{x: 25.399999293486296, y: 25.399999293486296}
console.log(shape.txtCenterU('mm', '0.0mm')); //{x: '25.4mm', y: '25.4mm'}

.txtFill([fill]) Returns: string|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.txtFill('#f00'); //set to red
shape.txtFill('#00ff00'); //set to green
shape.txtFill('rgb(0, 0, 255)'); //set to blue
shape.txtFill('aqua');
console.log(shape.txtFill()); //#00ffff
//Use style method to set multiple styles
shape.style({'txt-fill': '#000', 'stroke-width': 2}); //set to black fill and stroke width === 2

See also:

• Vecta.Shape.style

.txtFillOpacity([opacity]) Returns: number|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.txtFill('#007fff').txtFillOpacity(0.1); //set to 10% opacity, which is equivalent to 90% transparency
console.log(shape.txtFillOpacity()); //0.1
//Use style method to set multiple styles
shape.style({'txt-fill': '#000', 'txt-fill-opacity': 0.5}); //set to black fill and fill opacity === 0.5

See also:

• Vecta.Shape.style

.txtHeightU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.text('Add some text into the shape');
shape.txtSizeU('1in', '1in'); //resize text block to 1 inch by 1 inch
console.log(shape.txtHeightU()); //96
console.log(shape.txtHeightU('in')); //1
console.log(shape.txtHeightU('mm')); //25.399999293486296
console.log(shape.txtHeightU('mm', '0.0mm')); //'25.4mm'

.txtMove([x], [y]) Returns: Object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Add some text into the shape');
shape.txtMove(10, 10); //move the text block to 10px by 10px
console.log(shape.txtMove()); //{x: 10, y: 10}
shape.txtMove('1in'); //move text block to 1 inch by 10px. Because y is not provided, current value 10px is used.
console.log(shape.txtMove()); //{x: '1in', y: 10}
shape.txtMove('1in', '1in'); //move the text block to 1 inch by 1 inch
console.log(shape.txtMove()); //{x: '1in', y: '1in'}

.txtMoveU([unit], [format]) Returns: Object

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Add some text into the shape');
shape.txtMove('1in', '1in'); //move text block  to 1 inch by 1 inch
console.log(shape.txtMoveU()); //{x: 96, y: 96}
console.log(shape.txtMoveU('in')); //{x: 1, y: 1}
console.log(shape.txtMoveU('mm')); //{x: 25.399999293486296, y: 25.399999293486296}
console.log(shape.txtMoveU('mm', '0.0mm')); //{x: '25.4mm', y: '25.4mm'}

.txtRounded([radius]) Returns: number|string|null|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.txtFill('#007fff').txtRounded(10); //set to rounded 10 pixels
console.log(shape.txtRounded()); //10
shape.txtRounded('0.1in');
console.log(shape.txtRounded()); //0.1in

.txtSize([width], [height]) Returns: Object|Vecta.Shape

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Add some text into the shape');
shape.txtSize(100, 100); //resize the text block to 100px by 100px
console.log(shape.txtSize()); //{width: 100, height: 100}
shape.txtSize('1in'); //resize text block to 1 inch by 100px. Because height is not provided, current value 100px is used.
console.log(shape.txtSize()); //{width: '1in', height: 100}
shape.txtSize('1in', '1in'); //resize the text block to 1 inch by 1 inch
console.log(shape.txtSize()); //{width: '1in', height: '1in'}

.txtSizeU([unit], [format]) Returns: Object

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.text('Add some text into the shape');
shape.txtSizeU('1in', '1in'); //resize text block to 1 inch by 1 inch
console.log(shape.txtSizeU()); //{width: 96, height: 96}
console.log(shape.txtSizeU('in')); //{width: 1, height: 1}
console.log(shape.txtSizeU('mm')); //{width: 25.399999293486296, height: 25.399999293486296}
console.log(shape.txtSizeU('mm', '0.0mm')); //{width: '25.4mm', height: '25.4mm'}

.txtWidthU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.text('Add some text into the shape');
shape.txtSizeU('1in', '1in'); //resize text block to 1 inch by 1 inch
console.log(shape.txtWidthU()); //96
console.log(shape.txtWidthU('in')); //1
console.log(shape.txtWidthU('mm')); //25.399999293486296
console.log(shape.txtWidthU('mm', '0.0mm')); //'25.4mm'

.txtXU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Add some text into the shape');
shape.txtMove('1in', '1in'); //move text block  to 1 inch by 1 inch
console.log(shape.txtXU()); //96
console.log(shape.txtXU('in')); //1
console.log(shape.txtXU('mm')); //25.399999293486296
console.log(shape.txtXU('mm', '0.0mm')); //'25.4mm'

.txtYU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

shape.text('Add some text into the shape');
shape.txtMove('1in', '1in'); //move text block  to 1 inch by 1 inch
console.log(shape.txtYU()); //96
console.log(shape.txtYU('in')); //1
console.log(shape.txtYU('mm')); //25.399999293486296
console.log(shape.txtYU('mm', '0.0mm')); //'25.4mm'

.type() Returns: string

Returns:

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

if (shape.type() === 'rect') { shape.rounded(10); } //set the shape rounded corner to 10px if the shape is a rectangle.

.unflowText() Returns: Vecta.Shape

.updateAlignBox() Returns: Vecta.Shape

.widthU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.size('1in', '1in'); //resize shape to 1 inch by 1 inch
console.log(shape.widthU()); //96
console.log(shape.widthU('in')); //1
console.log(shape.widthU('mm')); //25.399999293486296
console.log(shape.widthU('mm', '0.0mm')); //'25.4mm'

See also:

• Vecta.Shape.sizeU

.xU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.move('1in', '1in'); //move shape to 1 inch by 1 inch
console.log(shape.xU()); //96
console.log(shape.xU('in')); //1
console.log(shape.xU('mm')); //25.399999293486296
console.log(shape.xU('mm', '0.0mm')); //'25.4mm'

See also:

• Vecta.Shape.moveU

.yU([unit], [format]) Returns: number|string

Examples:

var shape = Vecta.activePage.drawRect(0, 0, 50, 50);

shape.move('1in', '1in'); //move shape to 1 inch by 1 inch
console.log(shape.yU()); //96
console.log(shape.yU('in')); //1
console.log(shape.yU('mm')); //25.399999293486296
console.log(shape.yU('mm', '0.0mm')); //'25.4mm'

See also:

• Vecta.Shape.moveU