transformation-matrix

Isomorphic 2d transformation matrix functions written in ES6 syntax. Tree shaking ready!

Setup

NPM

  npm install transformation-matrix

YARN

yarn add transformation-matrix

UMD

<script src="https://unpkg.com/transformation-matrix@1"></script>

Usage example (ES6)

import {scale, rotate, translate, transform, applyToPoint} from 'transformation-matrix';
//or
let {scale, rotate, translate, transform, applyToPoint} = window.TransformationMatrix;


let matrix = transform(
translate(40,40),
rotate(Math.PI/2),
scale(2, 4)
);
let point = applyToPoint(matrix, {x: 42, y: 42});

Live Demo

available at http://chrvadala.github.io/transformation-matrix/

Reference

Functions

applyToPoint(matrix, point) ⇒ Object

Calculate a point transformed with an affine matrix

applyToPoints(matrix, points) ⇒ array

Calculate an array of points transformed with an affine matrix

fromObject(object) ⇒ Object

Extract an affine matrix from an object that contains a,b,c,d,e,f keys Each value could be a float or a string that contains a float

fromString(string) ⇒ Object

Parse a string matrix formatted as matrix(a,b,c,d,e,f)

identity() ⇒ Object

Identity matrix

inverse(matrix) ⇒ Object

Calculate a matrix that is the inverse of the provided matrix

isAffineMatrix(object) ⇒ boolean

Check if the object contain an affine matrix

rotate(angle) ⇒ Object

Calculate a rotation matrix

rotateDEG(angle) ⇒ Object

Calculate a rotation matrix with a DEG angle

scale(sx, sy) ⇒ Object

Calculate a scaling matrix

shear(shx, shy) ⇒ Object

Calculate a shear matrix

toCSS(matrix) ⇒ string

Serialize the matrix to a string that can be used with CSS or SVG

toSVG(matrix) ⇒ string

Serialize the matrix to a string that can be used with CSS or SVG

toString(matrix) ⇒ string

Serialize the matrix to a string that can be used with CSS or SVG

transform(...matrices) ⇒ Object

Merge multiple matrices into one

translate(tx, ty) ⇒ Object

Calculate a translate matrix

Changelog

• 0.0 - Preview version
• 1.0 - First public version
• 1.1 - Split lib into different files
• 1.2 - Adds shear operation
• 1.3 - Adds umd support
• 1.4 - Adds typescript definitions
• 1.5 - Upgrade deps

Some projects using transformation-matrix

• React Planner
• React SVG Pan Zoom
• Others...
• Pull request your project!

Contributors

• chrvadala (author)
• forabi (TypeScript definitions)

API

applyToPoint(matrix, point) ⇒ Object

Calculate a point transformed with an affine matrix

Kind: global function
Returns: Object - Point

Param	Description
matrix	Affine matrix
point	Point

applyToPoints(matrix, points) ⇒ array

Calculate an array of points transformed with an affine matrix

Kind: global function
Returns: array - Array of points

Param	Description
matrix	Affine matrix
points	Array of points

fromObject(object) ⇒ Object

Extract an affine matrix from an object that contains a,b,c,d,e,f keys Each value could be a float or a string that contains a float

Kind: global function
Returns: Object - }

Param
object

fromString(string) ⇒ Object

Parse a string matrix formatted as matrix(a,b,c,d,e,f)

Kind: global function
Returns: Object - Affine matrix

Param	Description
string	String with a matrix

identity() ⇒ Object

Identity matrix

Kind: global function
Returns: Object - Affine matrix

inverse(matrix) ⇒ Object

Calculate a matrix that is the inverse of the provided matrix

Kind: global function
Returns: Object - Affine matrix

Param	Description
matrix	Affine matrix

isAffineMatrix(object) ⇒ boolean

Check if the object contain an affine matrix

Kind: global function

Param
object

rotate(angle) ⇒ Object

Calculate a rotation matrix

Kind: global function
Returns: Object - Affine matrix *

Param	Description
angle	Angle in radians

rotateDEG(angle) ⇒ Object

Calculate a rotation matrix with a DEG angle

Kind: global function
Returns: Object - Affine matrix

Param	Description
angle	Angle in degree

scale(sx, sy) ⇒ Object

Calculate a scaling matrix

Kind: global function
Returns: Object - Affine matrix

Param	Description
sx	Scaling on axis x
sy	Scaling on axis y

shear(shx, shy) ⇒ Object

Calculate a shear matrix

Kind: global function
Returns: Object - Affine matrix

Param	Description
shx	Shear on axis x
shy	Shear on axis y

toCSS(matrix) ⇒ string

Serialize the matrix to a string that can be used with CSS or SVG

Kind: global function
Returns: string - String that contains a matrix formatted as matrix(a,b,c,d,e,f)

Param	Description
matrix	Affine matrix

toSVG(matrix) ⇒ string

Serialize the matrix to a string that can be used with CSS or SVG

Kind: global function
Returns: string - String that contains a matrix formatted as matrix(a,b,c,d,e,f)

Param	Description
matrix	Affine matrix

toString(matrix) ⇒ string

Serialize the matrix to a string that can be used with CSS or SVG

Kind: global function
Returns: string - String that contains a matrix formatted as matrix(a,b,c,d,e,f)

Param	Description
matrix	Affine matrix

transform(...matrices) ⇒ Object

Merge multiple matrices into one

Kind: global function
Returns: Object - Affine matrix

Param	Type	Description
...matrices	object	list of matrices

translate(tx, ty) ⇒ Object

Calculate a translate matrix

Kind: global function
Returns: Object - Affine matrix

Param	Description
tx	Translation on axis x
ty	Translation on axis y