Shape

Vecta.Shape

new Vecta.Shape(node)

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

NameTypeDescription
nodeElement

A node to be made into a shape. Can be a group node, a primitive (rect/path/circle/etc) or a jQuery object.

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

.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

.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'

.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'}

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

Returns all the control point available in the shape.

NameTypeAttributesDescription
indexnumberoptional

The index of control point in a shape

Returns:

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

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

.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:

.flipH([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.flipH(true); //flip horizontally
shape.flipH(false); //reset horizontal flip
shape.flipH(); //returns false

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

Get or set a shape 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.flipV(true); //flip shape vertically
shape.flipV(); //returns true since we have flipped now.
shape.flipV(false); //reset vertical flip
shape.flipV(); //returns false since it is now reset.

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

Get or set the shape's font.

NameTypeAttributesDescription
fontstring|nulloptional

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

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

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

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

Returns:

Return the font 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]) 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.

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]) 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.

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]) 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.

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 === 18px
See also:

.fontStyle([style]) 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

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

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], [formula]) Returns: string|boolean

Getter/setter method for Vecta.Shape formula.

NameTypeAttributesDescription
fieldstringoptional

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

formulastringoptional

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

Returns:

If get, returns formula expression for given field. Else, returns indication that formula is valid

Examples:
//Constant value
var shape = Vecta.activePage.drawRect(0, 0, 50, 50);
shape.formula('size.width', 100); //true
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()'); //true
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()') //true
shapeA.size(100);
console.log(shapeB.widthU()) //100

.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 increment to a shape

NameTypeAttributesDescription
valboolean|stringoptional

accepts true, false or regex string

Examples:
var shape = new Vecta.Shape('#123')
shape.increment('(\d+)')

.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([data]) Returns: object

Get or set custom data for shape

NameTypeAttributesDescription
dataobjectoptional

Custom data to set. If not given, returns custom data defined

Returns:

Returns custom data

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

Get or set a shape's hyperlink.

NameTypeAttributesDescription
urlstring|nulloptional

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

Returns:

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

Examples:
var shape = Vecta.activePage.drawRect(0, 0, 100, 100);
shape.link('https://vecta.io');

.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.

.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

Getter/setter method for Vecta.Shape name. If any shape with given name exists, then ID of shape will be appended.

NameTypeAttributesDescription
namestringoptional

The name to set, undefined if get

Returns:

Current name of the object if get or current context if set

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.xxx

.page() Returns: Vecta.Page

Get the shape's containing page.

Returns:

Returns a Vecta.Page object containing 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 parent shape.

Returns:

Returns null if not a child shape and have no parents, or 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().children().length); //2

.parents() Returns: Vecta.Shape[]

Get 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}]);

.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

.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:
  • Vecta.Page.shape

.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

.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'}

.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 [email protected]

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:

.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-anchor', 'text-align', 'fill', 'fill-opacity', 'font-fill', 'font-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

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

Get or set shape text.

NameTypeAttributesDescription
txtstringoptional

Text to insert into shape.

Returns:

Shape text if get, Vecta.Shape when set.

Examples:
var shape = Vecta.activePage.drawRect(0, 0, 100, 100);
shape.text('Add some text into the shape');
console.log(shape.text()); //"Let's add some text"

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

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

NameTypeAttributesDescription
alignnumber|nulloptional

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

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]) 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.

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:

.textDecoration([decor]) Returns: number|Vecta.Shape

Get or set the shape's text decoration.

NameTypeAttributesDescription
decornumber|nulloptional

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

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:

.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

.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

.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

.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'}

.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:

.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'}

.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.

.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: