transform ​

元素的变换矩阵，是元素布局与 坐标转换 的基础，可通过 Matrix / Point 类使用变换矩阵。

只读属性 ​

worldTransform: IMatrixWithScaleData ​

相对于世界坐标的变换矩阵, 包含 scaleX、scaleY 属性。

localTransform: IMatrixData ​

相对于父元素的变换矩阵。

来源于 ​

x: number ​

x 轴位置。

y: number ​

y 轴位置。

scaleX: number ​

x 轴缩放比例， 为负数时表示镜像 X 轴。

scaleY: number ​

y 轴缩放比例，为负数时表示镜像 Y 轴。

rotation: number ​

旋转角度，取值范围为 -180 ～ 180。

skewX: number ​

x 轴倾斜角度，取值范围为 -90 ～ 90。

skewY: number ​

y 轴倾斜角度，取值范围为 -90 ～ 90。

关键方法 ​

围绕中心点绘制、旋转、缩放元素，可使用更简单的 around 属性。

以下方法大部分为手动增量操作，增量操作暂时不能与 around 共用。

setTransform ( matrix: IMatrixData ) ​

设置本地变换矩阵，会自动分解为元素的布局属性 x,y, scaleX,scaleY,rotation, skewX, skewY。

getTransform ( relative?: ILocationType | UI = 'local' ): IMatrixData ​

获取变换矩阵, 支持获取相对任意父元素 relative 的相对矩阵。

transform ( matrix: IMatrixData ) ​

变换操作，会自动分解为布局属性 增量操作。

move ( x: number | IPointData, y = 0) ​

位移元素 增量操作， 支持直接传入 坐标对象。

scaleOf ( origin: IPointData | IAlign, scaleX: number, scaleY = scaleX) ​

以 origin（元素 inner 坐标 ） 为原点，缩放元素 增量操作。

rotateOf ( origin: IPointData | IAlign, rotation: number ) ​

以 origin （元素 inner 坐标 ） 为原点，旋转元素 增量操作。

skewOf ( origin: IPointData | IAlign, skewX: number, skewY = 0 ) ​

以 origin （元素 inner 坐标 ） 为原点，倾斜元素 增量操作。

// 想缩放到指定 scale， 需除以元素的 scale，如下：
leaf.scaleOf({ x: 50, y: 50 }, scale / leaf.scale)

// 想旋转到指定 rotation， 需减去元素的 rotation，如下：
leaf.rotateOf({ x: 50, y: 50 }, rotation - leaf.rotation)

// 想倾斜到指定 skewX， 需减去元素的 skewX，如下：
leaf.skewOf({ x: 50, y: 50 }, skewX - leaf.skewX)

相对世界坐标系 ​

transformWorld ( worldTransform: IMatrixData ) ​

transform() 在世界坐标系中操作。

moveWorld ( worldX: number | IPointData, worldY = 0 ) ​

move() 在世界坐标系中操作。

scaleOfWorld ( worldOrigin: IPointData, scaleX: number, scaleY = scaleX ) ​

scaleOf() 在世界坐标系中操作。

rotateOfWorld ( worldOrigin: IPointData, rotation: number ) ​

rotateOf() 在世界坐标系中操作。

skewOfWorld ( worldOrigin: IPointData, skewX: number, skewY = 0 ) ​

skewOf() 在世界坐标系中操作。

归属 ​

UI ​

示例 ​

旋转动画 ​

import { Leafer, Rect, AnimateEvent, PointerEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })
const rect = Rect.one({ fill: '#32cd79' }, 0, 30)
leafer.add(rect)

const event = leafer.on_(AnimateEvent.FRAME, () => { 
    rect.rotateOf({ x: 50, y: 50 }, 5)
    rect.move(5, 0)
    if (rect.x > 700) rect.x = 0
})

rect.on(PointerEvent.DOWN, () => {
    leafer.off_(event)
})