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

Typedefs

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 |