Skip to content

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 坐标 ) 为原点,倾斜元素 增量操作

ts
// 想缩放到指定 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

示例

旋转动画

ts
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)
})

Released under the MIT License.