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原点重合进行绘制,可以有效的简化操作逻辑。