Shape

Vecta.Shape

new Vecta.Shape(node)

Vecta.Shape objects are essentially wrappers for shapes on a drawing.

NameTypeDescription
nodestring|Element

A valid ID string to get the shape or a node to be made into a shape.

Examples:
var shape = new Vecta.Shape($('#123')); //Find a shape with id === 123, and create a shape

Properties

.$jQuery

The jQuery wrapped node for the shape.

NameTypeDescription
$jQuery

jQuery wrapper for shape node.

Methods

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

Get or set a shape's angle.

For set, angles are normalized to between 0 - 360 degrees.

If the provided angle is invalid, then the operation fails with an error message in console.

NameTypeAttributesDescription
anglenumberoptional

The angle to set in degrees, undefined if get.

Returns:

Returns the shape's angle if get or Vecta.Shape if set.

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

Get or set the begin point of a path. Applies to non closed paths only.

For get operations, both x and y must be undefined or not provided. If any one of the parameters is provided, then it is considered a set operation.

For set operations, if either x or y is not provided, then the current value is used in replacement. Both x and y can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

If any of the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
xnumber|stringoptional

X coordinate of the begin point.

ynumber|stringoptional

Y coordinate of the begin point.

Returns:

Returns the x and y coordinates if get or Vecta.Shape if set.

For get operations, the returned object will be in the following format:

{x: number|string, y: number|string}

where the type for x and y coordinates may be in numbers (px) or valid length strings.

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

Get or set the begin arrow of a shape.

Applies to unclosed paths only when get, where closed paths will automatically get their arrows removed and return null.

Applies also to grouped shapes when set, where all child shapes that are unclosed paths will be set.

NameTypeAttributesDescription
idstring|nulloptional

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:

Returns id of arrow or null if no arrows or not applicable, and Vecta.Shape when set.

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

Get the shape and connection point that is connected to the connector's begin.

Or connect the begin of a connector to a Vecta.Shape or a Vecta.Connect connection object when target is supplied.

NameTypeAttributesDescription
targetVecta.Shape|Vecta.Connect|nulloptional

Target could be either a Vecta.Shape or a Vecta.Connect or null to disconnect from previous connected shape. Undefined if get.

Returns:

Returns {shape: Vecta.Shape, conn: Vecta.Connect} when get, and Vecta.Shape when set.

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

Get or set the begin arrow size.

Applies to unclosed paths only when get, where closed paths will automatically get their arrows removed and return null.

Applies also to grouped shapes when set, where all child shapes that are unclosed paths will be set.

NameTypeAttributesDescription
sizenumber|nulloptional

The size of the arrow to set or undefined if get.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Returns size of arrow, or null if not applicable, and Vecta.Shape when set.

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

Get begin point of a path in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

Returns:

Returns x and y in the following format:

[x: number|string, y: 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.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

Get begin x point of a path in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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

Get begin y point of a path in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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

Add a bevel effect to the shape

NameTypeAttributesDescription
bevelobjectoptional

Returns bevel effect if undefined, else set bevel effect

NameTypeDescription
colorstring

Supported Vecta colors

deviationnumber

Bevel deviation

surface_scalenumber

Surface scale of the bevel

Returns:

Returns {color: string, deviation: number, surface_scale: number } if get, or Vecta.Shape if set.

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

Add a blur effect to the shape

NameTypeAttributesDescription
deviationnumberoptional

Blur value

Returns:

Returns blur value if get, or Vecta.Shape if set.

.box() Returns: object

Get a shape's bounding box. Read only.

Returns:

Return the shape's bounding box in the following format:

{x: number, y: number, width: number, height: number}

where all values are in px.

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

Get or set position of shape, where x and y refers to the center of the shape.

For get operations, both x and y must be undefined or not provided. If any one of the parameters is provided, then it is considered a set operation.

For set operations, if either x or y is not provided, then the current value is used in replacement. Both x and y can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

If any of the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
xnumber|stringoptional

X coordinate of shape center

ynumber|stringoptional

Y coordinate of shape center

Returns:

Return center x and y coordinates if get or Vecta.Shape if set.

For get operations, the returned object will be in the following format:

{x: number|string, y: number|string}

where the type for x and y coordinates may be in numbers (px) or valid length strings.

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

Get center x and y position of a shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

Returns:

Returns x and y in the following format:

[x: number|string, y: 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.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)

Clips current shape to another shape. Current shape acts as a clipper

NameTypeDescription
shapeVecta.Shape|null

can accept a shape to clip or null to release the clip.

.connectedShapes() Returns: Array

Get all shapes that are connected to current shape.

Returns:

Return an array of connected shapes.

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

Get or set connection mode for a shape.

NameTypeAttributesDescription
statebooleanoptional

Undefined if get, or true or false if set

Returns:

Returns true or false, true if shape can be connected to connection points only, returns Vecta.Shape if set.

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

Get a connection point with a given id or get all the connection points of a shape.

NameTypeAttributesDescription
idstring|nulloptional

The id of the connection point. Or null to get all the connection points of a shape.

Returns:

Returns Vecta.Connect object if id is given or an array of Vecta.Connect objects if not given

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 all the control points available in the shape.

NameTypeAttributesDescription
indexnumberoptional

The index of control point in a shape

Returns:

Returns Vecta.Control object if index is provided or an array of Vecta.Control objects if not.

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

Get center x position of a shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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:

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

Get center y position of a shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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:

.delete()

Delete a shape from the page.

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

Get or set the end point of a path. Applies to non closed paths only.

For get operations, both x and y must be undefined or not provided. If any one of the parameters is provided, then it is considered a set operation.

For set operations, if either x or y is not provided, then the current value is used in replacement. Both x and y can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

If any of the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
xnumber|stringoptional

X coordinate of the begin point.

ynumber|stringoptional

Y coordinate of the begin point.

Returns:

Returns the x and y coordinates if get or Vecta.Shape if set.

For get operations, the returned object will be in the following format:

{x: number|string, y: number|string}

where the type for x and y coordinates may be in numbers (px) or valid length strings.

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

Get or set the end arrow of a shape.

Applies to unclosed paths only when get, where closed paths will automatically get their arrows removed and return null.

Applies also to grouped shapes when set, where all child shapes that are unclosed paths will be set.

NameTypeAttributesDescription
idstring|nulloptional

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:

Returns id of arrow or null if no arrows or not applicable, and Vecta.Shape when set.

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

Get the shape and connection point that is connected to connector's end.

Or connect the end of a connector to a Vecta.Shape or a Vecta.Connect connection object when target is supplied.

NameTypeAttributesDescription
targetVecta.Shape|Vecta.Connect|nulloptional

Target could be either a Vecta.Shape or a Vecta.Connect. Undefined if get.

Returns:

Return {shape: Vecta.Shape, conn: Vecta.Connect} when get, and Vecta.Shape when set.

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

Get or set the end arrow size.

Applies to unclosed paths only when get, where closed paths will automatically get their arrows removed and return null.

Applies also to grouped shapes when set, where all child shapes that are unclosed paths will be set.

NameTypeAttributesDescription
sizenumber|nulloptional

The size of the arrow to set or undefined if get.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Returns size of arrow, or null if not applicable, and Vecta.Shape when set.

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

Get end point of a path in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

Returns:

Returns x and y in the following format:

[x: number|string, y: 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.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

Get end x point of a path in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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

Get end y point of a path in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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

Get or set the shape's fill.

NameTypeAttributesDescription
fillstring|nulloptional

Undefined if get or valid fill values if set.

If an invalid value is supplied, the operation will fail with a message in console.

Valid fill values are as below:

  • null, to remove fill attribute, and defaults to #ffffff
  • no fill, eg: 'none'
  • hex3 format, eg: '#f00'
  • hex6 format, eg: '#00ff00'
  • rgb format, eg: 'rgb(0, 0, 255)'
  • one of the svg color keywords, as defined in the specifications, eg: 'aqua'
  • a url that links to a gradient, eg: 'url(#L00100100006170010052c234.grad)'
Returns:

Return the fill when get, and Vecta.Shape when set.

Returned values are always in hex6 format or in the form of a URL for gradients.

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:

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

Get or set the shape's fill opacity.

NameTypeAttributesDescription
opacitynumber|nulloptional

Undefined if get or valid fill opacity values if set. Valid values are >= 0 and <= 1.

If null is supplied, the fill opacity attribute is removed, and defaults to 1.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the fill opacity when get, and Vecta.Shape when set.

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:

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

Get or set a shape horizontally.

NameTypeAttributesDefaultDescription
flippedbooleanoptionaltrue

Undefined to get, true to set, false to reset.

Returns:

Returns true or false if get or Vecta.Shape for chaining if set.

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.

NameTypeAttributesDefaultDescription
flippedbooleanoptionaltrue

Undefined to get, true to set, false to reset.

Returns:

Returns true or false if get or Vecta.Shape for chaining if set.

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

Convert the shape to path if it's not already a path, and then create a textpath which make the text flows along the shape

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

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

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

Get or set the shape's font family.

NameTypeAttributesDescription
fontstring|nulloptional

Undefined if get or valid font values if set.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

Valid font values are:

Anonymous Pro, Cousine, Lato, Open Sans, Roboto, Roboto Condensed

If null is supplied, the font attribute is removed, and defaults to Roboto.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the font family when get, and Vecta.Shape when set.

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:

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

Get or set the shape's font fill or color.

NameTypeAttributesDescription
fillstring|nulloptional

Undefined if get or valid color values if set.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If an invalid value is supplied, the operation will fail with a message in console.

Valid color values are as below:

  • null, to remove font fill attribute, and defaults to #000000
  • no fill, eg: 'none'
  • hex3 format, eg: '#f00'
  • hex6 format, eg: '#00ff00'
  • rgb format, eg: 'rgb(0, 0, 255)'
  • one of the svg color keywords, as defined in the specifications, eg: 'aqua'
  • a url that links to a gradient, eg: 'url(#L00100100006170010052c234.grad)'
Returns:

Return the font fill color when get, and Vecta.Shape when set.

Returned values are always in hex6 format or in the form of a URL for gradients.

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:

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

Get or set the shape's font opacity.

NameTypeAttributesDescription
opacitynumber|nulloptional

Undefined if get or valid font opacity values if set. Valid values are >= 0 and <= 1.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If null is supplied, the font opacity attribute is removed, and defaults to 1.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the font opacity when get, and Vecta.Shape when set.

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:

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

Get or set the shape's font size.

NameTypeAttributesDescription
sizenumber|string|nulloptional

Undefined if get or valid font size values if set.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If an invalid value is supplied, the operation will fail with a message in console.

Valid font values are:

  • null, to remove the font size attribute, and defaults to 14px.
  • number (px), eg: 18
  • valid string length in px or pt, eg: 18px, 18pt
Returns:

Return the font size when get, and Vecta.Shape when set.

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:

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

Get or set the shape's font style.

NameTypeAttributesDescription
stylestring|nulloptional

Undefined if get or valid font style values if set. Valid values are: normal or italic.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If null is supplied, the font style attribute is removed, and defaults to normal.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the font style when get, and Vecta.Shape when set.

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:

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

Get or set the shape's font weight.

NameTypeAttributesDescription
weightstring|nulloptional

Undefined if get or valid font weight values if set. Valid values are: normal or bold.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If null is supplied, the font weight attribute is removed, and defaults to normal.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the font weight when get, and Vecta.Shape when set.

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:

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

Get or set a shape's formula.

NameTypeAttributesDescription
fieldstringoptional

If not provided returns all formulas or a formula for provided field. If null, remove all formulas.

formstringoptional

Set formula if provided or get formula for given field. If null, removes formula for given field.

Returns:

If get, returns formula for given field. Otherwise, returns promise that resolves validity of the formula.

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[]

Get shape text with styles.

Returns:

Lists of sub texts and their styling in form of {text:string, styles: {}} var shape = Vecta.activePage.drawRect(0, 0, 100, 100);

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

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

Globalize a point in current shape's coordinate system to a target's coordinate system.

Target could be either Vecta.Page or Vecta.Shape. If not provided, defaults to Vecta.activePage

NameTypeAttributesDefaultDescription
xnumber|string

Coordinate point of x

ynumber|string

Coordinate point of y

targetVecta.Page|Vecta.ShapeoptionalVecta.activePage

Target could be either Vecta.Page or Vecta.Shape.

If not supplied, will default to Vecta.activePage.

Returns:

Converted target coordinates in {x: number|string, y: number|string}.

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

Add a glow effect to the shape

NameTypeAttributesDescription
glowobjectoptional

Returns glow effect if undefined, else set glow effect

NameTypeDescription
colorstring

Supported Vecta colors

deviationnumber

Glow deviation

opacitynumber

Opacity between 0 to 1

Returns:

Returns { color: string, deviation: number, opacity: number } if get, or Vecta.Shape if set.

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

Get or set the the visibility of a shape's handles.

NameTypeAttributesDescription
showbooleanoptional

Undefined if get, or true or false if set

Returns:

Returns false if handles is hidden or true if not when get, and Vecta.Shape when set.

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

Get height of shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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:

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

Get or set the visibility of a shape.

NameTypeAttributesDescription
statebooleanoptional

Undefined if get, or true or false if set

Returns:

Returns true if hidden or false if not when get, and Vecta.Shape when set.

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

Get the shape id. Read only.

Returns:

Returns the shape ID.

.increment([val])

Get or set automatic increment for a shape.

NameTypeAttributesDescription
valboolean|stringoptional

Accepts true, false or regex string that contains a capture group

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

Insert a shape into current shape

NameTypeDescription
shapeVecta.Shape

Shape to be added into current shape

Returns:

Returns current shape if it is a grouped shape, otherwise, returns the grouped shape

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

Returns true if shape is a child shape of a group, otherwise false.

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

Returns true if the shape is a connector, otherwise false.

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

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

.isGroup() Returns: boolean

Returns true if the shape is a grouped shape, otherwise false.

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

Get or set custom json for shape.

NameTypeAttributesDescription
jsonobjectoptional

Valid custom json to set. If not provided, returns custom json.

Returns:

Returns custom json or Vecta.Shape if set

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

Get or set the shape's layer.

For set, if a layer that does not exist gets assigned to a shape, the layer is automatically created on the document.

Once a shape is assigned to a layer, if the layer is hidden, then the shape gets hidden too.

NameTypeAttributesDescription
idstring|nulloptional

The layer id to set or undefined if get. If id is null, then the shape is assigned to the default layer.

Returns:

Returns Vecta.Layer if get and Vecta.Shape when set.

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

Get or set length of 2 segment straight line path

If the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
lennumberoptional

The length to set, undefined if get. Length can be any valid length strings, eg:

1in, 1mm, 1cm, 1px

Returns:

Returns the length in number or string if get, or Vecta.Shape if set.

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

Get the length of 2 segment straight line path in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px.

Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Returns:

Returns the length in number or string.

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

Get or set the shape's line spacing of text.

NameTypeAttributesDescription
spacenumber|nulloptional

Undefined if get or valid line spacing values if set. Valid values must be a number.

If null is supplied, the line spacing attribute is removed, and defaults to 1.2.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the line spacing value when get, and Vecta.Shape when set.

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:

Get or set a shape's hyperlinks.

NameTypeAttributesDescription
linksObject[]|nulloptional

The hyperlink objects to set or undefined if get. If hyperlink is null, then any existing is removed.

Returns:

Returns hyperlink objects if get, or Vecta.Shape if set.

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

Localize a point in a source's coordinate system to current shape's coordinate system.

Source could be either Vecta.Page or Vecta.Shape. If not provided, defaults to Vecta.activePage

NameTypeAttributesDefaultDescription
xnumber|string

Coordinate point of x

ynumber|string

Coordinate point of y

sourceVecta.Page|Vecta.ShapeoptionalVecta.activePage

Source could be either Vecta.Page or Vecta.Shape.

If not supplied, will default to Vecta.activePage.

Returns:

Converted source coordinates in {x: number|string, y: number|string}.

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

Get or set locking for a shape.

NameTypeAttributesDescription
statebooleanoptional

Undefined if get, or true or false if set

Returns:

Returns true if locked or false if unlocked, and Vecta.Shape if set.

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

Get or set the end marker for shape. Applies only for paths.

NameTypeAttributesDescription
marker_idstring|nulloptional

The id of a marker to set or undefined to get.

Returns:

Returns id of marker if no marker, and Vecta.Shape when set.

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

Get or set the middle marker for shape. Applies only for paths.

NameTypeAttributesDescription
marker_idstring|nulloptional

The id of a marker to set or undefined to get.

repeatbooleanoptional

Indication whether to repeat the marker on the path

Returns:

Returns id of marker if no marker, and Vecta.Shape when set.

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

Get or set the start marker for shape. Applies only for paths.

NameTypeAttributesDescription
marker_idstring|nulloptional

The id of a marker to set or undefined to get.

Returns:

Returns id of marker if no marker, and Vecta.Shape when set.

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

Get all menus or only the menu for the provided index in a shape

NameTypeAttributesDescription
indexnumberoptional

Index of menu to get. If not provided, returns all menus

Returns:

Returns menu

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

Get or set position of shape, where x and y refers to the top left corner.

For get operations, both x and y must be undefined or not provided. If any one of the parameters is provided, then it is considered a set operation.

For set operations, if either x or y is not provided, then the current value is used in replacement. Both x and y can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

If any of the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
xnumber|stringoptional

X coordinate of shape.

ynumber|stringoptional

Y coordinate of shape.

Returns:

Returns the x and y coordinates if get or Vecta.Shape if set.

For get operations, the returned object will be in the following format:

{x: number|string, y: number|string}

where the type for x and y coordinates may be in numbers (px) or valid length strings.

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

Get x and y position of a shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

Returns:

Returns x and y in the following format:

[x: number|string, y: 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.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

Get or set shape name. If any shape with given name exists, then ID of shape will be appended with a post fix (name.XXXXXXXX).

NameTypeAttributesDescription
namestringoptional

The name to set, undefined if get

Returns:

Name of the shape if get or Vecta.Shape if get

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

Get the shape's containing page.

Returns:

Returns a Vecta.Page object that contains the current shape.

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

Get the shape's immediate parent.

Returns:

Returns null if not a child shape and have no parents, otherwise the shape's parent.

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[]

Get all the shape's parents.

Returns:

Returns an empty array if a shape is the direct child of the page or an array of Vecta.Shape if the shape is a child shape.

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

Get or set the path segment list for shape. Applies only for paths.

NameTypeAttributesDescription
listPathList[]optional

Undefined if get or an array containing path segment list if set.

Returns:

Returns the path segment list if get or Vecta.Shape when set.

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

Reset the aspect ratio of the image to its original ratio

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

Get or set shape rounded corners.

Applies to rectangles only when get. Applies also to grouped shapes when set, where all child shapes that are rectangles will be set.

NameTypeAttributesDescription
radiusnumber|stringoptional

Radius can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

Returns:

Returns the rounded value or null if not applicable, and Vecta.Shape when set.

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

Add a shadow effect to the shape

NameTypeAttributesDescription
shadowobjectoptional

Returns shadow effect if undefined, else set shadow effect

NameTypeDescription
colorstring

Supported Vecta colors

deviationnumber

Shadow deviation

typestring

"drop" or "inner"

xstring

X offset of the shadow

ystring

Y offset of the shadow

opacitynumber

Opacity between 0 to 1

Returns:

Returns { color: string, deviation: number, type: string, x: string, y: string } if get, or Vecta.Shape if set.

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

Get a child shape with a given name, or get all child shapes starting with given name, by ignoring post fixes.

Names in Vecta must be unique, and therefore, if there is a duplicate, the name will be post fixed with an id. For example, 'A' will be post fixed to 'A.XXXXXXXX'.

NameTypeAttributesDefaultDescription
namestring

The name to find.

allbooleanoptionalfalse

False to get a single shape, or true to get all shapes.

Returns:

Returns null if the shape cannot be found, a single Vecta.Shape if all is false, or an array of Vecta.Shape if all is true.

If nothing is found with all === true, a zero length array will be returned.

See also:

.shapes() Returns: Vecta.Shape[]

Get the shape's children or direct sub shapes.

Returns:

Returns direct child shapes in an array of Vecta.Shape objects.

If none is found, a zero length array is returned.

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

Get or set the the visibility of a shape's alignment box

NameTypeAttributesDescription
showbooleanoptional

Undefined if get, or true or false if set

Returns:

Returns false if alignment box is hidden or true if not when get, and Vecta.Shape when set.

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

Get or set the size of a shape.

For get operations, both width and height must be undefined or not provided. If any one of the parameters is provided, then it is considered a set operation.

For set operations, if either width or height is not provided, then the current value is used in replacement. Both width and height can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

If any of the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
widthnumber|stringoptional

Width of shape.

heightnumber|stringoptional

Height of shape.

Returns:

Returns the width and height if get or Vecta.Shape if set.

For get operations, the returned object will be in the following format:

{width: number|string, height: number|string}

where the type for width and height may be in numbers (px) or valid length strings.

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

Get size of a shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

Returns:

Returns width and height in the following format:

[width: number|string, height: 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.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

Get or set a shape's skewX.

For set, angle is normalized to between 0 - 360 degrees.

If the provided angle is invalid, then the operation fails with an error message in console.

NameTypeAttributesDescription
anglenumberoptional

The angle to set in degrees, undefined if get.

Returns:

Returns the shape's skewX if get or Vecta.Shape if set.

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

Get or set a shape's skewY.

For set, angle is normalized to between 0 - 360 degrees.

If the provided angle is invalid, then the operation fails with an error message in console.

NameTypeAttributesDescription
anglenumberoptional

The angle to set in degrees, undefined if get.

Returns:

Returns the shape's skewY if get or Vecta.Shape if set.

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[]

Search the neighbor shapes within a certain radius

NameTypeAttributesDescription
radiusnumber

The radius length to search

centerobjectoptional

The center coordinate to search. Default to shape's center

NameTypeAttributesDescription
xnumberoptional

The center's x coordinate

ynumberoptional

The center's y coordinate

Returns:

An array of neighbor shapes within a certain radius

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

Get or set a shape's text path startOffset value.

NameTypeAttributesDescription
valuenumberoptional

The angle to set in degrees, undefined if get.

Returns:

Returns the shape's text path startOffset value if get or Vecta.Shape if set.

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

Get or set the shape's stroke or line color.

NameTypeAttributesDescription
strokestring|nulloptional

Undefined if get or valid stroke values if set.

If an invalid value is supplied, the operation will fail with a message in console.

Valid stroke values are as below:

  • null, to remove stroke attribute, and defaults to #000000
  • no stroke, eg: 'none'
  • hex3 format, eg: '#f00'
  • hex6 format, eg: '#00ff00'
  • rgb format, eg: 'rgb(0, 0, 255)'
  • one of the svg color keywords, as defined in the specifications, eg: 'aqua'
  • a url that links to a gradient, eg: 'url(#L00100100006170010052c234.grad)'
Returns:

Return the stroke when get, and Vecta.Shape when set.

Returned values are always in hex6 format or in the form of a URL for gradients.

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:

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

Get or set the shape's stroke dasharray or line style.

NameTypeAttributesDescription
dashstring|nulloptional

Undefined if get or valid dash array values if set.

Valid dash arrays values are:

(length)(comma or white space) Examples: "2 2", "0.1mm 0.1in"

If dash === null, stroke dasharray attribute will be removed, and defaults to none. If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the stroke dash array when get, and Vecta.Shape when set.

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:

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

Get or set the shapes's stroke dash offset

NameTypeAttributesDescription
offsetnumberoptional

Undefined if get or valid offset value (numbers) if set.

Returns:

Returns stroke offset when get, and Vecta.Shape when set.

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

Get or set the shape's stroke linecap.

NameTypeAttributesDescription
capstring|nulloptional

Undefined if get or valid cap values if set.

Valid cap values are: "round", "butt", "square"

If cap === null, stroke linecap attribute will be removed, and defaults to round. If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the stroke linecap when get, and Vecta.Shape when set.

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:

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

Get or set the shape's stroke linejoin.

NameTypeAttributesDescription
joinstring|nulloptional

Undefined if get or valid join values if set.

Valid cap values are: "miter", "round", "bevel"

If join === null, stroke linejoin attribute will be removed, and defaults to round.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the stroke linejoin when get, and Vecta.Shape when set.

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:

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

Get or set the shape's stroke opacity.

NameTypeAttributesDescription
opacitynumber|nulloptional

Undefined if get or valid stroke opacity values if set. Valid values are >= 0 and <= 1.

If null is supplied, the stroke opacity attribute is removed, and defaults to 1.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the stroke opacity when get, and Vecta.Shape when set.

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:

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

Get or set the shape's stroke width or line weight.

NameTypeAttributesDescription
widthstring|nulloptional

Undefined if get or valid unit length values if set, eg: 1in, 1px, 1mm, 1cm.

If width === null, stroke width attribute will be removed, and defaults to 1px.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the stroke width when get, and Vecta.Shape when set.

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:

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

Get or set shape style.

NameTypeAttributesDescription
attrstring|Object

The style attribute to get or set.

For get operations, attr must be a valid string limited to the below:

'begin', 'end', 'begin-size', 'end-size', 'stroke', 'stroke-width', 'stroke-opacity', 'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin', 'font-family', 'font-size', 'font-weight', 'font-style', 'text-decoration', 'text-strike-through', 'text-anchor', 'text-align', 'fill', 'fill-opacity', 'font-fill', 'font-opacity', 'txt-fill', 'txt-fill-opacity'

For set operations, attr can be a string to set a single style or an object to set multiple styles, with the following format:

{attribute: value[, attribute: value]}

valuestring|numberoptional

Style to insert into shape

Returns:

shape style if get, this object if set, for chaining

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

Get or set the symbol type of a shape

NameTypeAttributesDescription
valstring|number|nulloptional

The value of symbol type to set or get if undefined

Returns:

type Type of the symbol

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

Get or set shape text.

NameTypeAttributesDefaultDescription
txtstring|object[]optional

Text to insert into shape.

For set operations, txt can be a string to set text only or an object to set text with sub text styles, with the following format:

[{text: value, styles: {attribute: value[, attribute: value]}}]

attribute must be a valid string limited to the below:

'font-weight', 'font-style', 'font-size', 'font-family', 'font-fill', 'font-opacity' 'text-decoration', 'text-strike-through', 'text-stroke', 'text-stroke-width', 'text-stroke-opacity'

trim_textbooleanoptionaltrue

To trim the text before insert into shape. Defaults to true if undefined

Returns:

Shape text if get, Vecta.Shape when set.

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

Get or set the shape's text align, or vertical alignment.

NameTypeAttributesDescription
alignstring|nulloptional

Undefined if get or valid text align values if set. Valid values are top, central and bottom.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If null is supplied, the text align attribute is removed, and defaults to central.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the text align when get, and Vecta.Shape when set.

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:

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

Get or set the shape's text anchor, or horizontal alignment.

NameTypeAttributesDescription
anchornumber|nulloptional

Undefined if get or valid text anchor values if set. Valid values are start, middle and end.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If null is supplied, the text anchor attribute is removed, and defaults to middle.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the text anchor when get, and Vecta.Shape when set.

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:

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

Add a bevel effect to the shape's text

NameTypeAttributesDescription
bevelobjectoptional

Returns bevel effect if undefined, else set bevel effect

NameTypeDescription
colorstring

Supported Vecta colors

deviationnumber

Bevel deviation

surface_scalenumber

Surface scale of the bevel

Returns:

Returns { color: string, deviation: number, surface_scale: number } if get, or Vecta.Shape if set.

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

Add a blur effect to the shape's text

NameTypeAttributesDescription
deviationnumberoptional

Blur value

Returns:

Returns blur value if get, or Vecta.Shape if set.

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

Get or set the shape's text decoration.

NameTypeAttributesDescription
decorstring|nulloptional

Undefined if get or valid text decoration values if set. Valid values are none and underline.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If null is supplied, the text decoration attribute is removed, and defaults to none.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the text decoration when get, and Vecta.Shape when set.

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:

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

Add a glow effect to the shape's text

NameTypeAttributesDescription
glowobjectoptional

Returns glow effect if undefined, else set glow effect

NameTypeDescription
colorstring

Supported Vecta colors

deviationnumber

Glow deviation

opacitynumber

Opacity between 0 to 1

Returns:

Returns { color: string, deviation: number, opacity: number } if get, or Vecta.Shape if set.

.textHeight() Returns: number

Get a shape's text height. Read only.

Returns:

Returns the shape's text height in pixels.

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

Get or set the visibility of a shape text.

NameTypeAttributesDescription
statebooleanoptional

Undefined if get, or true or false if set

Returns:

Returns true if hidden or false if not when get, and Vecta.Shape when set.

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

Add a shadow effect to the shape's text

NameTypeAttributesDescription
shadowobjectoptional

Returns shadow effect if undefined, else set shadow effect

NameTypeDescription
colorstring

Supported Vecta colors

deviationnumber

Shadow deviation

typestring

"drop" or "inner"

xstring

X offset of the shadow

ystring

Y offset of the shadow

opacitynumber

Opacity between 0 to 1

Returns:

Returns { color: string, deviation: number, type: string, x: string, y: string } if get, or Vecta.Shape if set.

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

Get or set the shape's text strikethrough.

NameTypeAttributesDescription
stylestring|nulloptional

Undefined if get or valid text strikethrough values if set. Valid values are none and line-through.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If null is supplied, the text strikethrough attribute is removed, and defaults to none.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the text strikethrough when get, and Vecta.Shape when set.

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:

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

Get or set the shape's text stroke or line color.

NameTypeAttributesDescription
strokestring|nulloptional

Undefined if get or valid stroke values if set.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If an invalid value is supplied, the operation will fail with a message in console.

Valid stroke values are as below:

  • null, to remove stroke attribute, and defaults to #000000
  • no stroke, eg: 'none'
  • hex3 format, eg: '#f00'
  • hex6 format, eg: '#00ff00'
  • rgb format, eg: 'rgb(0, 0, 255)'
  • one of the svg color keywords, as defined in the specifications, eg: 'aqua'
  • a url that links to a gradient, eg: 'url(#L00100100006170010052c234.grad)'
Returns:

Return the stroke when get, and Vecta.Shape when set.

Returned values are always in hex6 format or in the form of a URL for gradients.

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:

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

Get or set the shape's text stroke opacity.

NameTypeAttributesDescription
opacitynumber|nulloptional

Undefined if get or valid stroke opacity values if set. Valid values are >= 0 and <= 1.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If null is supplied, the stroke opacity attribute is removed, and defaults to 1.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the stroke opacity when get, and Vecta.Shape when set.

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:

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

Get or set the shape's text stroke width or line weight.

NameTypeAttributesDescription
widthstring|nulloptional

Undefined if get or valid unit length values if set, eg: 1in, 1px, 1mm, 1cm.

skip_subsbooleanoptional

Indicate if should skip sub shapes when a shape is a group

If width === null, stroke width attribute will be removed, and defaults to 1px.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the stroke width when get, and Vecta.Shape when set.

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:

.textWidth() Returns: number

Get a shape's text width. Read only.

Returns:

Returns the shape's text width in pixels.

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

Convert shapes to path.

Paths (already converted) and images will NOT be converted.

Upon completion, converted shapes will be returned.

Returns:

Returns the converted shape if it is a grouped shape, otherwise, returns the converted grouped shape

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

Get or set a shape's text block angle.

For set, angles are normalized to between 0 - 360 degrees.

If the provided angle is invalid, then the operation fails with an error message in console.

NameTypeAttributesDescription
anglenumberoptional

The angle to set in degrees, undefined if get.

Returns:

Returns the shape's text block angle if get or Vecta.Shape if set.

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

Get center x position of a text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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:

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

Get center y position of a text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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:

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

Get or set position of text, where x and y refers to the center of the text block.

For get operations, both x and y must be undefined or not provided. If any one of the parameters is provided, then it is considered a set operation.

For set operations, if either x or y is not provided, then the current value is used in replacement. Both x and y can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

If any of the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
xnumber|stringoptional

X coordinate of text block.

ynumber|stringoptional

Y coordinate of text block.

Returns:

Returns the x and y coordinates if get or Vecta.Shape if set.

For get operations, the returned object will be in the following format:

{x: number|string, y: number|string}

where the type for x and y coordinates may be in numbers (px) or valid length strings.

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

Get center x and y position of a text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

Returns:

Returns x and y in the following format:

[x: number|string, y: number|string]

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

Get or set the text block's fill.

NameTypeAttributesDescription
fillstring|nulloptional

Undefined if get or valid fill values if set.

If an invalid value is supplied, the operation will fail with a message in console.

Valid fill values are as below:

  • no fill, eg: 'none'
  • hex3 format, eg: '#f00'
  • hex6 format, eg: '#00ff00'
  • rgb format, eg: 'rgb(0, 0, 255)'
  • one of the svg color keywords, as defined in the specifications, eg: 'aqua'
  • a url that links to a gradient, eg: 'url(#L00100100006170010052c234.grad)'
Returns:

Return the fill when get, and Vecta.Shape when set.

Returned values are always in hex6 format or in the form of a URL for gradients.

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:

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

Get or set the text block's fill opacity.

NameTypeAttributesDescription
opacitynumber|nulloptional

Undefined if get or valid fill opacity values if set. Valid values are >= 0 and <= 1.

If null is supplied, the fill opacity attribute is removed, and defaults to 1.

If an invalid value is supplied, the operation will fail with a message in console.

Returns:

Return the fill opacity when get, and Vecta.Shape when set.

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:

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

Get height of text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

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

Get or set position of text, where x and y refers to the top left corner of the text block.

For get operations, both x and y must be undefined or not provided. If any one of the parameters is provided, then it is considered a set operation.

For set operations, if either x or y is not provided, then the current value is used in replacement. Both x and y can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

If any of the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
xnumber|stringoptional

X coordinate of text block.

ynumber|stringoptional

Y coordinate of text block.

Returns:

Returns the x and y coordinates if get or Vecta.Shape if set.

For get operations, the returned object will be in the following format:

{x: number|string, y: number|string}

where the type for x and y coordinates may be in numbers (px) or valid length strings.

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

Get x and y position of a text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

Returns:

Returns x and y in the following format:

[x: number|string, y: 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.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

Get or set rounded corner on the text block.

NameTypeAttributesDescription
radiusnumber|stringoptional

Radius can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

Returns:

Returns the rounded value or null if not applicable, and Vecta.Shape when set.

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

Get or set size of text block.

For get operations, both width and height must be undefined or not provided. If any one of the parameters is provided, then it is considered a set operation.

For set operations, if either width or height is not provided, then the current value is used in replacement. Both width and height can be numbers (px) or valid length strings, eg: 1in, 1 mm, 10 px.

If any of the provided parameters is an invalid length, then the operation fails with an error message in console.

NameTypeAttributesDescription
widthnumber|stringoptional

Width of text block.

heightnumber|stringoptional

Height of text block.

Returns:

Returns the width and height if get or Vecta.Shape if set.

For get operations, the returned object will be in the following format:

{width: number|string, height: number|string}

where the type for width and height may be in numbers (px) or valid length strings.

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

Get size of text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Returns:

Returns width and height in the following format:

[width: number|string, height: 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.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

Get width of text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

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

Get x position of a text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

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

Get y position of a text block in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

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

Get the shape element type.

Returns:

Returns the shape element type. Can be any of the following:

  • 'rect' for rectangles
  • 'ellipse' for circles or ellipses
  • 'path' for paths
  • 'g' for grouped shapes
  • 'image' for image shapes
  • 'svg' for imported svg shapes
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

If the shape contains textpath, revert it back to normal text, else do nothing

.updateAlignBox() Returns: Vecta.Shape

Update the alignment box of the shape

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

Get width of shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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:

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

Get x position of a shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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:

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

Get y position of a shape in multiple formats. Read only.

NameTypeAttributesDefaultDescription
unitstringoptionalpx

The unit to return. If not supplied or invalid, will default to px. Valid values are: px, mm, in, cm.

formatstringoptional

Specifies the format of the returned value. If no format is specified, will return numbers.

Valid formats are in the form of 0.00mm or 0.0000 cm.

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.io Early Access