new Vecta.Shape(node)
Vecta.Shape objects are essentially wrappers for shapes on a drawing.
Name | Type | Description |
---|---|---|
node | string|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.
Name | Type | Description |
---|---|---|
$ | 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.
Name | Type | Attributes | Description |
---|---|---|---|
angle | number | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
x | number|string | optional | X coordinate of the begin point. |
y | number|string | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
id | string|null | optional | The id of the arrow to set or undefined to get. Arrow ids can be any of the following: If id === null, end arrow will be removed, and defaults to no arrows. If an invalid value is supplied, the operation will fail with a message in console. |
Returns:
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.
Name | Type | Attributes | Description |
---|---|---|---|
target | Vecta.Shape|Vecta.Connect|null | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
size | number|null | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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
Name | Type | Attributes | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
bevel | object | optional | Returns bevel effect if undefined, else set bevel effect
|
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
Name | Type | Attributes | Description |
---|---|---|---|
deviation | number | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
x | number|string | optional | X coordinate of shape center |
y | number|string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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
Name | Type | Description |
---|---|---|
shape | Vecta.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.
Name | Type | Attributes | Description |
---|---|---|---|
state | boolean | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
id | string|null | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
index | number | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Description |
---|---|---|---|
x | number|string | optional | X coordinate of the begin point. |
y | number|string | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
id | string|null | optional | The id of the arrow to set or undefined to get. Arrow ids can be any of the following: If id === null, end arrow will be removed, and defaults to no arrows. If an invalid value is supplied, the operation will fail with a message in console. |
Returns:
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.
Name | Type | Attributes | Description |
---|---|---|---|
target | Vecta.Shape|Vecta.Connect|null | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
size | number|null | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Description |
---|---|---|---|
fill | string|null | optional | 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:
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
opacity | number|null | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
flipped | boolean | optional | true | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
flipped | boolean | optional | true | 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.
Name | Type | Attributes | Description |
---|---|---|---|
font | string|null | optional | Undefined if get or valid font values if set. |
skip_subs | boolean | optional | Indicate if should skip sub shapes when a shape is a group Valid font values are:
If null is supplied, the font attribute is removed, and defaults to 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.
Name | Type | Attributes | Description |
---|---|---|---|
fill | string|null | optional | Undefined if get or valid color values if set. |
skip_subs | boolean | optional | 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:
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
opacity | number|null | optional | Undefined if get or valid font opacity values if set. Valid values are >= 0 and <= 1. |
skip_subs | boolean | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
size | number|string|null | optional | Undefined if get or valid font size values if set. |
skip_subs | boolean | optional | 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:
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
style | string|null | optional | Undefined if get or valid font style values if set. Valid values are: |
skip_subs | boolean | optional | 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 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.
Name | Type | Attributes | Description |
---|---|---|---|
weight | string|null | optional | Undefined if get or valid font weight values if set. Valid values are: |
skip_subs | boolean | optional | 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 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.
Name | Type | Attributes | Description |
---|---|---|---|
field | string | optional | If not provided returns all formulas or a formula for provided field. If null, remove all formulas. |
form | string | optional | 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.
.getPins() Returns: object[]
Get list of pins from a symbol
Returns:
List of objects that contains the Vecta.Shape of the pin, pin name and connection point.
Examples:
var symbol = Vecta.selection.shapes()[0];
symbol.getPins().forEach(function (pin) {
console.log(pin.shape, pin.name, pin.connect_point);
});
.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
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
x | number|string | Coordinate point of x | ||
y | number|string | Coordinate point of y | ||
target | Vecta.Page|Vecta.Shape | optional | Vecta.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
Name | Type | Attributes | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
glow | object | optional | Returns glow effect if undefined, else set glow effect
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
show | boolean | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Description |
---|---|---|---|
state | boolean | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
val | boolean|string | optional | 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
Name | Type | Description |
---|---|---|
shape | Vecta.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.
Name | Type | Attributes | Description |
---|---|---|---|
json | object | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
id | string|null | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
len | number | optional | The length to set, undefined if get. Length can be any valid length strings, eg:
|
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to Valid values are: |
format | string | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
space | number|null | optional | 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:
.links([links]) Returns: Object[]|Vecta.Shape
Get or set a shape's hyperlinks.
Name | Type | Attributes | Description |
---|---|---|---|
links | Object[]|null | optional | 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
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
x | number|string | Coordinate point of x | ||
y | number|string | Coordinate point of y | ||
source | Vecta.Page|Vecta.Shape | optional | Vecta.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.
Name | Type | Attributes | Description |
---|---|---|---|
state | boolean | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
marker_id | string|null | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
marker_id | string|null | optional | The id of a marker to set or undefined to get. |
repeat | boolean | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
marker_id | string|null | optional | 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
Name | Type | Attributes | Description |
---|---|---|---|
index | number | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
x | number|string | optional | X coordinate of shape. |
y | number|string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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).
Name | Type | Attributes | Description |
---|---|---|---|
name | string | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
list | PathList[] | 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.
Name | Type | Attributes | Description |
---|---|---|---|
radius | number|string | optional | Radius can be numbers (px) or valid length strings, eg: |
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
Name | Type | Attributes | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
shadow | object | optional | Returns shadow effect if undefined, else set shadow effect
|
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'
.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
name | string | The name to find. | ||
all | boolean | optional | false | 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
Name | Type | Attributes | Description |
---|---|---|---|
show | boolean | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
width | number|string | optional | Width of shape. |
height | number|string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Description |
---|---|---|---|
angle | number | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
angle | number | optional | 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
Name | Type | Attributes | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
radius | number | The radius length to search | |||||||||||||
center | object | optional | The center coordinate to search. Default to shape's center
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
value | number | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
stroke | string|null | optional | 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:
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
dash | string|null | optional | Undefined if get or valid dash array values if set. Valid dash arrays values are:
If dash === null, stroke dasharray attribute will be removed, and defaults to |
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
Name | Type | Attributes | Description |
---|---|---|---|
offset | number | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
cap | string|null | optional | Undefined if get or valid cap values if set. Valid cap values are: If cap === null, stroke linecap attribute will be removed, and defaults to |
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.
Name | Type | Attributes | Description |
---|---|---|---|
join | string|null | optional | Undefined if get or valid join values if set. Valid cap values are: If join === null, stroke linejoin attribute will be removed, and defaults to 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.
Name | Type | Attributes | Description |
---|---|---|---|
opacity | number|null | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
width | string|null | optional | Undefined if get or valid unit length values if set, eg: If width === null, stroke width attribute will be removed, and defaults to 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.
Name | Type | Attributes | Description |
---|---|---|---|
attr | string|Object | The style attribute to get or set. For get operations, attr must be a valid string limited to the below:
For set operations, attr can be a string to set a single style or an object to set multiple styles, with the following format:
| |
value | string|number | optional | 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
Name | Type | Attributes | Description |
---|---|---|---|
val | string|number|null | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
txt | string|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:
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_text | boolean | optional | true | 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.
Name | Type | Attributes | Description |
---|---|---|---|
align | string|null | optional | Undefined if get or valid text align values if set. Valid values are |
skip_subs | boolean | optional | 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 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.
Name | Type | Attributes | Description |
---|---|---|---|
anchor | number|null | optional | Undefined if get or valid text anchor values if set. Valid values are |
skip_subs | boolean | optional | 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 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
Name | Type | Attributes | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
bevel | object | optional | Returns bevel effect if undefined, else set bevel effect
|
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
Name | Type | Attributes | Description |
---|---|---|---|
deviation | number | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
decor | string|null | optional | Undefined if get or valid text decoration values if set. Valid values are |
skip_subs | boolean | optional | 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 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
Name | Type | Attributes | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
glow | object | optional | Returns glow effect if undefined, else set glow effect
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
state | boolean | optional | 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
Name | Type | Attributes | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
shadow | object | optional | Returns shadow effect if undefined, else set shadow effect
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
style | string|null | optional | Undefined if get or valid text strikethrough values if set. Valid values are |
skip_subs | boolean | optional | 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 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.
Name | Type | Attributes | Description |
---|---|---|---|
stroke | string|null | optional | Undefined if get or valid stroke values if set. |
skip_subs | boolean | optional | 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:
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
opacity | number|null | optional | Undefined if get or valid stroke opacity values if set. Valid values are >= 0 and <= 1. |
skip_subs | boolean | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
width | string|null | optional | Undefined if get or valid unit length values if set, eg: |
skip_subs | boolean | optional | Indicate if should skip sub shapes when a shape is a group If width === null, stroke width attribute will be removed, and defaults to 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.
Name | Type | Attributes | Description |
---|---|---|---|
angle | number | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
x | number|string | optional | X coordinate of text block. |
y | number|string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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:
.txtFill([fill]) Returns: string|Vecta.Shape
Get or set the text block's fill.
Name | Type | Attributes | Description |
---|---|---|---|
fill | string|null | optional | 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:
|
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.
Name | Type | Attributes | Description |
---|---|---|---|
opacity | number|null | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | 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.
Name | Type | Attributes | Description |
---|---|---|---|
x | number|string | optional | X coordinate of text block. |
y | number|string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Description |
---|---|---|---|
radius | number|string | optional | Radius can be numbers (px) or valid length strings, eg: |
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.
Name | Type | Attributes | Description |
---|---|---|---|
width | number|string | optional | Width of text block. |
height | number|string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied, will default to |
format | string | optional | 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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
unit | string | optional | px | The unit to return. If not supplied or invalid, will default to |
format | string | optional | Specifies the format of the returned value. If no format is specified, will return numbers. Valid formats are in the form of |
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'