skew

元素的倾斜属性。

关键属性

skewX: number

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

skewY: number

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

关键方法

注意事项

以下方法为增量操作，适合图形编辑场景。

动画、游戏场景中，可使用更简单的 origin / around + skew 实现围绕中心点倾斜。

skewOf ( origin: IAlign ｜ IPointData, addSkewX: number, addSkewY = 0, resize?: boolean, transition?: ITranstion )

围绕原点 origin（ box 坐标 ）倾斜元素 增量操作，transition 参数表示是否进行 动画 过渡。

// 围绕中心继续倾斜X轴 45度
rect.skewOf('center', 45)

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

// 动画过渡
rect.skewOf('center', 45, 0, true)

rect.skewOf('center', 45, 0, 2) // 过渡 2 秒

skewOfWorld ( worldOrigin: IPointData, addSkewX: number, addSkewY = 0, resize?: boolean, transition?: ITranstion )

围绕原点 worldOrigin（ 世界坐标 ）倾斜元素 增量操作，transition 参数表示是否进行 动画 过渡。

归属

UI

示例

通过 skewOf() 倾斜元素

// #通过 rotateOf() 旋转元素 [无动画过渡]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = Rect.one({ fill: '#32cd79' }, 100, 100)

leafer.add(rect)

setTimeout(() => {

    // 围绕中心点继续旋转 45度
    rect.rotateOf('center', 45) 

}, 1000)

通过 skewOf() 倾斜元素，有动画过渡

// #通过 rotateOf() 旋转元素 [有动画过渡]
import { Leafer, Rect } from 'leafer-ui'

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

const rect = Rect.one({ fill: '#32cd79' }, 100, 100)

leafer.add(rect)

setTimeout(() => {

    // 围绕中心点继续旋转 45度
    rect.rotateOf('center', 45, true) 

}, 1000)