Matrix For Canvas #

* usage
* files
* classes

Usage ##

* install
* import

$3

* npm install canvas-matrix

#### node ####
* const matrix = require('canvas-matrix');
* const { Mat3, Mat4 } = matrix;
* const transform = new Mat3().setTranslate(xm,ym)
.multipleBy(new Mat3().setScale(xs, ys))
.multipleBy(new Mat3().setRotate(degree))
.getCanvasTransform();

#### webpack es6 ####
import as matrix from 'canvas-matrix';

中文说明 #

使用 ##

* npm install canvas-matrix
* import { Mat3, Mat4 } from 'canvas-matrix';
* const transform = new Mat3().setRotate(90).thenScale(2, 2).thenTranslate(1, 2).getCanvasTransform();//获得一个数组。an array, length 6

处理图片提示 ##

* 首先获取canvas的宽度与高度的一半 canvasHalfWidth, canvasHalfHeight，
* 获取图片的宽高的一般, imageHalfWidth, imageHalfHeight，
* canvas的2dcontext：context2d，
* const trans = new Mat3().setRotate(0).thenScale(1,1).thenTranslate(canvasHalfWidth, canvasHalfHeight);
* context2d.setTransform(...trans.getCanvasTransform());
* context2d.drawImage(image, - imageHalfWidth, - imageHalfHeight);
* 这样操作出来的图片会在canvas的正中。
* 旋转与缩放是基于原点，而平移是在原有位置上的。所以将图片中心与canvas原点重合进行绘制，可以有效的简化操作逻辑。