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

`javascript
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

`javascript
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

`javascript
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

`javascript
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.translate) ⇒ transformers
* [.rotate(angle, [x], [y])](#transformers.rotate) ⇒ transformers
* [.scale(x, [y])](#transformers.scale) ⇒ transformers
* .shear(x, y) ⇒ transformers
* .skew(x, y) ⇒ transformers
* .inverse() ⇒ transformers
* [.pointTo([x], [y])](#transformers.pointTo) ⇒ Object
* .render() ⇒ string

$3

Perform matrix multiplication

Kind: static method of transformers

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

Example
`js
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 }
`


$3

Parse a valid string containing various transformations

Kind: static method of transformers

| Param | Type |
| --- | --- |
| str | string |

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


$3

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
`js
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}
`


$3

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 |

$3

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
`js
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}
`


$3

Perform shear

Kind: static method of transformers

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

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


$3

Perform skew

Kind: static method of transformers

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

Example
`js
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}
`


$3

Inverse current matrix

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


$3

Obtain a point after applying transformation

Kind: static method of transformers

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

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


$3

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

Kind: static method of transformers
Example
`js
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 |