math

Vecta.math

Returns an object that contains all the methods that can be used for operations that require mathematical calculations.

Properties

.getTValue

Get t Value for segments based on a point on segment.

Examples:
var pathlist = [{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}],
    point;

t_value = Vecta.math.getTValue(pathlist, {x: 5, y: 5}); //Get the t value on pathList
console.log(t_value) //0.5

Methods

.angle(x, y, cx, cy) Returns: number

Calculate the angle of given a point from a center point.

NameTypeDescription
xnumber

X coordinate

ynumber

Y coordinate

cxnumber

X coordinate of the center point

cynumber

Y coordinate of the center point

Returns:

Returns the angle in degrees.

Examples:
var point = {x: 20, y:20},
    cx = 10,
    cy = 10,
    angle;

angle = Vecta.math.angle(point.x, point.y, cx, cy); //get the degree of (20, 20) from center (10, 10)

console.log(angle); //135

.distance(x1, y1, x2, y2) Returns: number

Calculate the distance between 2 points

NameTypeDescription
x1number

The x coordinate of the first point

y1number

The y coordinate of the first point

x2number

The x coordinate of the second point

y2number

The y coordinate of the second point

Returns:

Returns the distance between the two coordinates.

Examples:
var distance = Vecta.math.distance(10, 20, 50, 40);

console.log(distance); //44.721359549995796

.getPoint(list, t) Returns: Point

Get a point on a segment based on t value.

NameTypeDescription
listPathList

The path segment list to get a point from

tnumber

The T value

Returns:

Returns the resulting point.

Examples:
var pathlist = [{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}],
    point;

point = Vecta.math.getPoint(pathlist, 0.5); //Get the point on pathList with a T value of 0.5
console.log(points) //{x: 5, y: 5}

.intersect(s1, s2) Returns: Intersect

Determines if 2 segments intersect.

NameTypeDescription
s1PathList[]

Segment array in the form [{type: 'M', x: , y:}, {type: , x: , y}]

s2PathList[]

Segment array in the form [{type: 'M', x: , y:}, {type: , x: , y}]

Returns:

Returns an intersection object.

Examples:
var path_1 = [{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}],
    path_2 = [{type: 'M', x: 20, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 0, y: 20}],
    intersect;

intersect = Vecta.math.intersect(path_1, path_2);

console.log(intersect); //{pts: [{x: 10, y: 10}], [[1], [1]]}

.isPointInShape(x, y, shape) Returns: boolean

Check if a point is inside a shape. The left top is the coordinate origin.

NameTypeDescription
xnumber

The x coordinate of the point

ynumber

The y coordinate of the point

shapeVecta.Shape

The shape to check

Returns:

Returns true if point is inside path, false otherwise.

Examples:
Vecta.math.isPointInShape(10, 20, shape); //Checks whether the point (10, 20) is in the shape

.isPointOnPath(x, y, list, [tolerance]) Returns: boolean

Check if a point is on top of a path.

NameTypeAttributesDescription
xnumber

The x coordinate to check.

ynumber

The y coordinate to check.

listPathList[]

The path segment list to check.

tolerancenumberoptional

Tolerance to accept the point is on the path, default to 0.01px

Returns:

Returns true if point is on top of the path, false otherwise.

Examples:
var pathlist = [{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}],
    point = {x: 20, y:20},
    pointOnPath;

//determine whether the point is in the path
pointOnPath = Vecta.math.isPointOnPath(point.x, point.y, pathlist);

console.log(pointOnPath); //true

.normalizeAngle(angle) Returns: number

Normalize angle to within 0 - 360 degrees.

NameTypeDescription
anglenumber

The angle to normalize

Returns:

Returns the normalized angle in degrees.

Examples:
var normalizedAngle;

//normalize the angle 450 degrees to within 0 - 360 degrees
normalizedAngle = Vecta.math.normalizedAngle(450);

console.log(normalizedAngle); //90

.offsetPathList(list, x, y) Returns: PathList[]

Offset a path.

NameTypeDescription
listPathList[]

The path segment list to offset

xnumber

The x offset

ynumber

The y offset

Returns:

Returns the changed path segment list.

Examples:
var pathlist = [{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}];

//offset the pathlist by x = 10 and y = 10
Vecta.math.offsetPathList(pathlist, 10, 10);

.pointInPath(x, y, list) Returns: boolean

Check if a point is inside a path.

NameTypeDescription
xnumber

The x coordinate to check

ynumber

The y coordinate to check

listPathList[]

The path segment list to check

Returns:

Returns true if point is inside path, false otherwise.

Examples:
var pathlist = [{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}],
    point = {x: 20, y:20},
    pointInPath;

//determine whether the point is in the path
pointInPath = Vecta.math.pointInPath(point.x, point.y, pathlist);

console.log(pointInPath); //true

.rotatePathList(list, cx, cy, angle) Returns: PathList[]

Rotate a list of segments.

NameTypeDescription
listPathList[]

The path segment list to rotate

cxnumber

The x coordinate of center of rotation

cynumber

The y coordinate of center of rotation

anglenumber

The angle to rotate in degrees

Returns:

Returns the rotated list.

Examples:
var pathlist = [{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}];

//rotate the pathlist with the center (10, 10) at 90 degree angle
Vecta.math.rotatePathList(pathlist, 10, 10, 90);

.rotatePoint(x, y, cx, cy, angle) Returns: Point

Rotate a point at a given angle and center.

The left top is the coordinate origin, and angles are always clockwise.

NameTypeDescription
xnumber

The x coordinate of point to be rotation

ynumber

The y coordinate of point to be rotation

cxnumber

The center x coordinate of the rotation

cynumber

The center y coordinate of the rotation

anglenumber

The angle that should be rotated

Returns:

Returns the resulting point after rotation.

Examples:
//rotate a point starting at coordinate (10, 20) with the center (15, 15) at a 90 degree angle
var point = Vecta.math.rotatePoint(10, 20, 15, 15, 90);

console.log(point); //{x: 10, y: 10}

.segmentize(list) Returns: PathList[][]

Split a path segment list into individual segments.

Although a path segment list contains a list of segments, most times, these segments may refer to the previous segment as a starting point for the next segment. For example:

[{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}]

The segmentize method split all these segments into individual segment preceded by a 'M' type, as below:

[[{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}], [{type: 'M', x: 10, y: 10}, {type: 'L', x: 20, y: 20}]]

NameTypeDescription
listPathList[]

The path segment list to split

Returns:

Returns an array of path segment list array, essentially a 2 dimensional array.

Examples:
var pathlist = [{type: 'M', x: 0, y: 0}, {type: 'L', x: 10, y: 10}, {type: 'L', x: 20, y: 20}];

Vecta.math.segmentize(pathlist); //split a path segment list into individual segments

.splitSegment(seg, t) Returns: PathList[][]

Split path segments using a T value. Can split both line, quad and cubic curves.

NameTypeDescription
segPathList[]

The path segment list to split

tnumber

The T value to split

Returns:

Returns an array containing split path segment list.

Examples:
var curve = [{type: "M", x: 0, y: 175}, {type: "Q", x1: 0, y1: 0, x: 135, y: 0}],
    split;

split = Vecta.math.splitSegment(curve, 1/3); //Split the curve seg by a T value of 1/3

console.log(split); //an array of split path list

.typeToList(type, x, y, width, height, rounded) Returns: PathList[][]

Convert a given type of SVG shape into an array of path segment lists.

NameTypeDescription
typestring

The type to be converted into an array of path segment lists.

The type must be a string limited to the below:

'rect', 'ellipse', 'image', 'svg'

xnumber

The x coordinate of the type

ynumber

The y coordinate of the type

widthnumber

The width of the type

heightnumber

The height of the type

roundednumber

The rounded corner value of the type

Returns:

Returns an array of path segment list array, essentially a 2 dimensional array.

Examples:
//Convert a rectangle with width 50px, height 50px, and rounded corner radius 2px at coordinate (10, 20) to an array of path segment list
Vecta.math.typeToList('rect', 10, 20, 50, 30, 2);
vecta.io Early Access