Skip to content

transform

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

内外视图

只读属性

worldTransform: IMatrixData

相对于世界坐标的变换矩阵。

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。

transform ( matrix: IMatrixData)

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

move ( x: number, y = 0): void

位移元素 增量操作

scaleOf ( origin: IPointData, scaleX: number, scaleY = scaleX)

以 origin 为原点,缩放元素 增量操作

origin 为元素的 inner 坐标, 想缩放到指定 scale, 需除以元素的 scale,如下:

ts
leaf.scaleOf({ x: 50, y: 50 }, scale / leaf.scale)

rotateOf ( origin: IPointData, rotation: number)

以 origin 为原点,旋转元素 增量操作

origin 为元素的 inner 坐标,想旋转到指定 rotation, 需减去元素的 rotation,如下:

ts
leaf.rotateOf({ x: 50, y: 50 }, rotation - leaf.rotation)

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

以 origin 为原点,倾斜元素 增量操作

origin 为元素的 inner 坐标,想倾斜到指定 skewX, 需减去元素的 skewX,如下:

ts
leaf.skewOf({ x: 50, y: 50 }, skewX - leaf.skewX)

getWorld ( name: string ): number

获取相对于世界坐标的变换属性。

归属

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

获取相对世界坐标的布局属性

ts
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79' })

leafer.scale = 2
leafer.add(rect)

console.log(
    rect.getWorld('x'), 
    rect.getWorld('y'),
    rect.getWorld('scaleX'),
    rect.getWorld('scaleY'),
    rect.getWorld('rotation'),
    rect.getWorld('skewX'),
    rect.getWorld('skewY')
)

Released under the MIT License.