Page

Vecta.Page

new Vecta.Page(node)

Vecta page object.

NameTypeDescription
nodeSVGElement

The svg element for the page

Properties

.$jQuery

The jQuery wrapped node for the page.

NameTypeDescription
$jQuery

jQuery wrapper for page node.

Methods

.clone(shapes) Returns: Vecta.Shape[]

Clone a shape in a page

NameTypeDescription
shapesVecta.Shape|Vecta.Shape[]

Shape or shapes that needs to be clone.

Returns:

Return an array of cloned shape Vecta.Shape if got shapes, or empty array if shapes is undefined.

Examples:
var shape = Vecta.activePage.drawRect(0, 0, 50, 50); //Drawing a shape
var clone = Vecta.activePage.clone(shape); //Clone the drawn shape
console.log(clone); //[Vecta.Shape]

.drawEllipse(x, y, width, height) Returns: Vecta.Shape

Draws an ellipse on the page.

All parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm

NameTypeDescription
xnumber|string

X-coordinate

ynumber|string

Y-coordinate

widthnumber|string

Width of shape

heightnumber|string

Height of shape

Examples:
Vecta.activePage.drawEllipse(0, 0, 100, 100); //draws an ellipse at 0,0 with width = 100 and height = 100
Vecta.activePage.drawEllipse('0in', '0in', '10in', '10in'); //draws an ellipse at 0in,0in with width = 10in and height = 10in

.drawGuide(x, y, vertical) Returns: Vecta.Guide

Draw a guide on a page. Length parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm

NameTypeDescription
xnumber|string

X-coordinate

ynumber|string

Y-coordinate

verticalboolean

To denote need to draw vertical guide or horizontal guide

Examples:
Vecta.activePage.drawGuide(15, 0, true);

.drawImage(link, x, y, width, height) Returns: Vecta.Shape

Draws an image on the page. Length parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm

NameTypeDescription
linkstring

The href link to the image

xnumber|string

X-coordinate

ynumber|string

Y-coordinate

widthnumber|string

Width of shape

heightnumber|string

Height of shape

Examples:
Vecta.activePage.drawImage('https://images.vecta.io/sample_image.png', 0, 0, 300 , 150);

.drawPath(list) Returns: Vecta.Shape

Draws a path on the page.

NameTypeDescription
listPathList[]

An array containing path segment list.

Examples:
//draw a path and close it
Vecta.activePage.drawPath([{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 10, y: 0}, {type: 'Z'}]);

.drawRect(x, y, width, height) Returns: Vecta.Shape

Draws a rectangle on the page.

All parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm

NameTypeDescription
xnumber|string

X-coordinate

ynumber|string

Y-coordinate

widthnumber|string

Width of shape

heightnumber|string

Height of shape

Examples:
Vecta.activePage.drawRect(0, 0, 100, 100); //draws a rectangle at 0,0 with width = 100 and height = 100
Vecta.activePage.drawRect('0in', '0in', '10in', '10in'); //draws a rectangle at 0in,0in with width = 10in and height = 10in

.drawSVG(svg, x, y) Returns: Vecta.Shape

Draw or import a svg onto a page. Length parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm

NameTypeDescription
svgstring

The svg string to draw

xnumber|string

X-coordinate

ynumber|string

Y-coordinate

Examples:
Vecta.activePage.drawSVG('<svg><rect x="0" y="0" width="10" height="10" /></svg>', 0, 0);

.drawText(x, y, width, height, [text]) Returns: Vecta.Shape

Draws a text block on the page

Length parameters accepts numbers or valid string units, eg: 10in, 10mm, 10px, 10cm

NameTypeAttributesDefaultDescription
xnumber|string

X-coordinate

ynumber|string

Y-coordinate

widthnumber|string

Width of shape

heightnumber|string

Height of shape

textstringoptional""

The text to be inserted into the text block or empty string if not supplied.

Examples:
Vecta.activePage.drawText(0, 0, 100, 100, 'Sample Text');

.getEnclosedShapes(x, y, width, height) Returns: Vecta.Shape[]

Return an array of shapes for a given area on the page.

NameTypeDescription
xnumber

x-coordinate in px

ynumber

y-coordinate in px

widthnumber

width of area in px

heightnumber

height of area in px

Returns:

Returns an array of shapes in an area or zero length array if no shapes are found.

.height([height]) Returns: number|string|Vecta.Page

Get or set page height.

NameTypeAttributesDescription
heightnumber|stringoptional

The height to set, undefined if get. Accepts numbers or valid length strings, eg: 10in, 10mm, 10px, 10cm.

Returns:

Returns number or string for get, or Vecta.Page if set.

Examples:
Vecta.activePage.height('8in'); //set page height to 8 inches

.heightU() Returns: string

Get height of page in multiple formats. Read only.

Returns:

Returns the height.

.id() Returns: string

Get the page id.

Returns:

Returns the page ID.

.json([data]) Returns: object

Get or set custom data for page

NameTypeAttributesDescription
dataobjectoptional

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

Returns:

Returns custom data

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

.orientation([orient]) Returns: number|Vecta.Page

Get or set the paper orientation.

NameTypeAttributesDescription
orientnumberoptional

The orientation to get or set. 0 === LANDSCAPE, 1 === PORTRAIT

Returns:

Returns 0 for landscape, 1 for portrait, or Vecta.Page if set.

Examples:
Vecta.activePage.orientation(); //get paper orientation
Vecta.activePage.orientation(1); //set to portrait mode

.paperType([type]) Returns: string|Vecta.Page

Get or set paper type for page. If page size is set using width or height methods, paper type will return custom.

By default, Vecta will detect your geolocation and create default paper sizing automatically. For example, in North America, Vecta will use LETTER as default while using A4 in other locations when creating a new page.

NameTypeAttributesDescription
typestringoptional

The paper type to set, or undefined to get. Valid paper sizes includes the following:

  • A5: { width: '210mm', height: '148mm' }
  • A4: { width: '297mm', height: '210mm' }
  • A3: { width: '420mm', height: '297mm' }
  • A2: { width: '594mm', height: '420mm' }
  • A1: { width: '841mm', height: '594mm' }
  • A0: { width: '1189mm', height: '841mm' }
  • LETTER: { width: '11in', height: '8.5in' }
  • FOLIO: { width: '13in', height: '8.5in' }
  • LEGAL: { width: '14in', height: '8.5in' }
  • LEDGER: { width: '17in', height: '11in' }
  • FACEBOOK_1200X630 { width: 1200, height: 630}
  • BANNER_180X150: { width: 180, height: 150}
  • BANNER_200X200: { width: 200, height: 200}
  • BANNER_250X250: { width: 250, height: 250}
  • BANNER_300X250: { width: 300, height: 250}
  • BANNER_336X280: { width: 336, height: 280}
  • BANNER_120X600: { width: 120, height: 600}
  • BANNER_160X600: { width: 160, height: 600}
  • BANNER_300X1050: { width: 300, height: 1050}
  • BANNER_120X240: { width: 120, height: 240}
  • BANNER_240X400: { width: 240, height: 400}
  • BANNER_300X600: { width: 300, height: 600}
  • BANNER_468X60: { width: 468, height: 60}
  • BANNER_728X90: { width: 728, height: 90}
  • BANNER_970X90: { width: 970, height: 90}
Examples:
Vecta.activePage.paperType(); //returns A4, custom or other paper sizes depending on settings
Vecta.activePage.paperType('A4'); //set the paper type to A4.

.scale([src], [tgt]) Returns: number|Vecta.Page

Get or set page scale.

NameTypeAttributesDescription
srcnumberoptional

The source scale to set, undefined to get.

tgtnumberoptional

The target scale to set, undefined to get.

Returns:

Returns the scale when get or Vecta.Page when set.

Examples:
Vecta.activePage.scale('1in', '10in'); //Set scale 1 inch equivalent to 10 inch
console.log(Vecta.activePage.scale()); //10

.scaleU([format]) Returns: string

Get page scale in standard format

NameTypeAttributesDescription
formatstringoptional

separator of the scales

Returns:

Returns the scale in X:Y format by default is param is not given

Examples:
console.log(Vecta.activePage.scale()); // 1:1
console.log(Vecta.activePage.scale('-')); // 1-1

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

Get a shape with a given name, or get all 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.

Examples:
Vecta.activePage.shape('A'); //returns a single shape with name = 'A'
Vecta.activePage.shapes('A'); //returns all shapes starting with name = 'A', including 'A.123' but not 'AA'.

.shapeCount() Returns: number

Get the number of shapes on the page. The count includes only shapes that is immediate children of a page, and does not include child shapes (shapes that are inside other shapes).

.shapes([name]) Returns: *|Array

Get direct child shapes on the page.

NameTypeAttributesDescription
namestringoptional

Returns direct child shapes if name is undefined, or child shapes with name, if supplied.

Returns:

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

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

Examples:
Vecta.activePage.shapes(); //returns all immediate child shapes on the page.

.unit() Returns: string

Get the page measurement unit.

Returns:

Returns px, in, mm or cm depending on current page measurement unit.

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

Get or set page width.

NameTypeAttributesDescription
widthnumber|stringoptional

The width to set, undefined if get. Accepts numbers or valid length strings, eg: 10in, 10mm, 10px, 10cm.

Returns:

Returns number or string for get, or Vecta.Page if set.

Examples:
Vecta.activePage.width('11in'); //set the page width to 11 inches

.widthU() Returns: string

Get width of page in multiple formats. Read only.

Returns:

Returns the width.