transformersjs

transformers

Lightweight zero-dependency transformation matrix utilities

Why

Perform transformation matrix calculation in a 2D plane. Use this library to:

• Create a transformation matrix and manipulate it via translation, rotation, scale, shear, skew
• Parse a transformation in string format, translate(10 20) rotate(30)
• Obtain a point after applying transformation
• Obtain matrix in string format to be used in CSS or SVG

Install

npm install transformersjs

Usage

Initialize a matrix

var transformers = require('transformersjs');
 
var mat = transformers();
//OR
var mat = transformers({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
 
mat.matrix; // { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }

Parse transformation in string

var transformers = require('transformersjs');
 
var mat = transformers('translate(10, 15) rotate(30)');
//OR
var mat = transformers().translate(10, 15).rotate(30);
 
mat.matrix; //{ a: 1, b: 0, c: 0, d: 1, e: 10, f: 15 }

Obtain a point after applying transformations

var transformers = require('transformersjs');
 
var mat = transformers('translate(10, 15)');
 
mat.pointTo(8, 5); // { x: 18, y: 20 }

Convert matrix to string to be used in CSS or SVG

var transformers = require('transformersjs');
 
var mat = transformers('translate(10, 15)');
 
mat.render(); // matrix(1,0,0,1,10,15)

API

Objects

transformers : object

Initializer to create a matrix instance

Typedefs

Matrix : object

Matrix formation

transformers : object

Initializer to create a matrix instance

Kind: global namespace

Param	Type	Description
[input]	string | object | array	Can be a transformation in string, object, array notation

• transformers : object
  • .multiply(matrix) ⇒ transformers
  • .parse(str) ⇒ transformers
  • .translate([x], [y]) ⇒ transformers
  • .rotate(angle, [x], [y]) ⇒ transformers
  • .scale(x, [y]) ⇒ transformers
  • .shear(x, y) ⇒ transformers
  • .skew(x, y) ⇒ transformers
  • .inverse() ⇒ transformers
  • .pointTo([x], [y]) ⇒ Object
  • .render() ⇒ string

transformers.multiply(matrix) ⇒ transformers

Perform matrix multiplication

Kind: static method of transformers

Param	Type	Description
matrix	array | Matrix | Transformers	matrix to be multiplied

Example

var transformers = require('transformersjs');
var mat = transformers();
 
mat.multiply({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
mat.multiply([1, 0, 0, 1, 0, 0]);
mat.multiply(mat); // { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }

transformers.parse(str) ⇒ transformers

Parse a valid string containing various transformations

Kind: static method of transformers

Param	Type
str	string

Example

var transformers = require('transformersjs');
var mat = transformers();
 
mat.parse('translate(10,10)'); // {a: 1, b: 0, c: 0, d: 1, e: 10, f: 10}

transformers.translate([x], [y]) ⇒ transformers

Perform translation

Kind: static method of transformers

Param	Type	Default	Description
[x]	number	0	translation along x-axis
[y]	number	0	translation along y-axis

Example

var transformers = require('transformersjs');
var mat = transformers('translate(10, 10)');
 
mat.translate(); // {a: 1, b: 0, c: 0, d: 1, e: 10, f: 10}
mat.translate(5, 5); // {a: 1, b: 0, c: 0, d: 1, e: 15, f: 15}

transformers.rotate(angle, [x], [y]) ⇒ transformers

Perform rotation

Kind: static method of transformers

Param	Type	Description
angle	number	angle in degree
[x]	number	rotation along a point in x-axis
[y]	number	rotation along a point in y-axis

transformers.scale(x, [y]) ⇒ transformers

Perform scaling

Kind: static method of transformers

Param	Type	Default	Description
x	number		scaling along x-axis
[y]	number	x	scaling along y-axis

Example

var transformers = require('transformersjs');
var mat = transformers('translate(10, 10)');
 
mat.scale(5); // {a: 5, b: 0, c: 0, d: 5, e: 10, f: 10}
mat.scale(5, 2); // {a: 5, b: 0, c: 0, d: 2, e: 10, f: 10}

transformers.shear(x, y) ⇒ transformers

Perform shear

Kind: static method of transformers

Param	Type	Description
x	number	shear along x-axis
y	number	shear along y-axis

Example

var transformers = require('transformersjs');
var mat = transformers();
 
mat.shear(5,5); // {a: 1, b: 5, c: 5, d: 1, e: 0, f: 0}

transformers.skew(x, y) ⇒ transformers

Perform skew

Kind: static method of transformers

Param	Type	Description
x	number	skew along x-axis
y	number	skew along y-axis

Example

var transformers = require('transformersjs');
var mat = transformers();
 
mat.skew(5,5); // {a: 1, b: -3.3805, c: -3.3805, d: 1, e: 0, f: 0}

transformers.inverse() ⇒ transformers

Inverse current matrix

Kind: static method of transformers
Example

var transformers = require('transformersjs');
var mat = transformers('translate(10, 10)');
 
mat.inverse(); // {a: 1, b: 0, c: 0, d: 1, e: -10, f: -10}

transformers.pointTo([x], [y]) ⇒ Object

Obtain a point after applying transformation

Kind: static method of transformers

Param	Type	Default
[x]	number	0
[y]	number	0

Example

var transformers = require('transformersjs');
var mat = transformers('translate(10,10)');
 
mat.pointTo(); // {x: 10, y: 10}
mat.pointTo(10); // {x: 20, y: 10}

transformers.render() ⇒ string

Converts current matrix to string format to be used in CSS or SVG

Kind: static method of transformers
Example

var transformers = require('transformersjs');
var mat = transformers('translate(10,10)');
 
mat.render(); // "matrix(1,0,0,1,10,10)"

Matrix : object

Matrix formation

Kind: global typedef
Properties

Name	Type	Default
a	number	1
b	number	0
c	number	0
d	number	1
e	number	0
f	number	0