transformersjs v1.1.0
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
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 |