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' import '@leafer-in/animate' // 导入动画插件 //  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)