Skip to content

Matrix

Matrix 矩阵类, 类似 CSS 的 transform。

矩阵操作会影响 Outer 外部视图,Inner 内部视图始终不变。

内外视图

关键属性

a: number

scaleX 结合旋转值,默认为 1。

b: number

默认为 0。

c: number

默认为 0。

d: number

scaleY 结合旋转值,默认为 1。

e: number

x 轴坐标(矩阵原点),默认为 0。

f: number

y 轴坐标(矩阵原点),默认为 0。

关键方法

返回 Matrix 时,可以支持连贯操作。

set ( a: number | IMatrixData = 1, b = 0, c = 0 , d = 1, e = 0, f = 0 ): Matrix

设置 矩阵数据,与 new Matrix() 的参数一样, 默认为 1,0,0,1,0,0。

get (): IMatrixData

获取 矩阵数据对象 {a,b,c,d,e,f}。

clone (): Matrix

克隆一个 Matrix 对象。

移动

translate ( x: number, y: number ): Matrix

从外部视图移动矩阵原点, 直接递增 e,f 属性。

translateInner ( x: number, y: number ): Matrix

从内部视图移动矩阵原点,会转换为外部视图的移动距离,再递增 e,f 属性,受 a,b,c,d 影响。

缩放

scale ( scaleX: number, scaleY = scaleX ): Matrix

从外部视图缩放矩阵, 直接修改 a,b,c,d。

scaleOfOuter ( origin: IPointData, scaleX: number, scaleY = scaleX ): Matrix

以外部视图坐标 origin 为原点,缩放矩阵。

scaleOfInner ( origin: IPointData, scaleX: number, scaleY = scaleX ): Matrix

以内部视图坐标 origin 为原点,缩放矩阵。

旋转

rotate ( rotation: number ): Matrix

从外部视图 旋转 矩阵,以角度为单位。

rotateOfOuter ( origin: IPointData, rotation: number ): Matrix

以外部视图坐标 origin 为原点, 旋转 矩阵。

rotateOfInner ( origin: IPointData, rotation: number ): Matrix

以内部视图坐标 origin 为原点, 旋转 矩阵。

倾斜

skew ( skewX: number, skewY = 0 ): Matrix

从外部视图倾斜矩阵,以角度为单位。

skewOfOuter ( origin: IPointData, skewX: number, skewY = 0 ): Matrix

以外部视图坐标 origin 为原点,倾斜矩阵。

skewOfInner ( origin: IPointData, skewX: number, skewY = 0 ): Matrix

以内部视图坐标 origin 为原点,倾斜矩阵。

相乘

multiply ( child: IMatrixData ): Matrix

乘以子矩阵。

multiplyParent ( parent: IMatrixData ): Matrix

乘以父矩阵。

相除

divide ( child: IMatrixData ): Matrix

除以子矩阵。

divideParent ( parent: IMatrixData ): Matrix

除以父矩阵。

invert (): Matrix

反转矩阵。

转换坐标

toOuterPoint ( inner: IPointData, to?:IPointData, distance?: boolean )

转换为外部视图坐标, 如果存在 to, 则将结果设置给 to , distance 表示转换距离、长度。

toInnerPoint ( outer: IPointData, to?:IPointData, distance?: boolean )

转换为内部视图坐标, 如果存在 to, 则将结果设置给 to , distance 表示转换距离、长度。

布局数据

setLayout ( layout: ILayoutData, origin?: IPointData, around?: IPointData ): Matrix

设置矩阵数据,来源于布局数据 {x,y, scaleX,scaleY,rotation, skewX, skewY},支持设置 originaround

getLayout ( origin?: IPointData, around?: IPointData, firstSkewY?: boolean ): ILayoutData

分解矩阵,获取布局数据 {x,y, scaleX,scaleY,rotation, skewX, skewY}, 支持设置 originaround 再转换, firstSkewY 表示优先转换 skewY。

withScale ( scaleX?: number, scaleY = scaleX ): IMatrixWithScaleData

给矩阵临时添加 scaleX、scaleY 属性,不传入参数时将自动分解出 scaleX、scaleY 属性。

一般用于临时叠加 matrix 选项 渲染元素。

reset (): void

重置当前矩阵。

示例

通过属性值创建

ts
import { Matrix } from 'leafer-ui'

const matrix = new Matrix(2, 0, 0, 2, 100, 100)

通过数据对象创建

ts
const matrixData = { a: 2, b: 0, c: 0, d: 2, e: 100, f: 100 }

const matrix = new Matrix(matrixData)

连贯操作

ts
const matrix = new Matrix()

matrix.set(2, 0, 0, 2, 100, 100).scale(0.5) // { a: 1, b: 0, c: 0, d: 1, e: 100, f: 100 }

API

Matrix

Released under the MIT License.