transformation-matrix
Isomorphic 2d transformation matrix functions written in ES6 syntax. Tree shaking ready!
Setup
NPM
npm install transformation-matrixUMD
<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});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
Some projects using transformation-matrix
- React Planner
- React SVG Pan Zoom
- Others...
- Pull request your project!
Contributors
- chrvadala (author)
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 |