rotation

元素的旋转属性。

关键属性

rotation: number

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

关键方法

注意事项

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

动画、游戏场景中，可使用更简单的 origin / around + rotation 属性实现围绕中心点旋转。

rotateOf ( origin: IAlign | IPointData, addRotation: number, transition?: ITranstion )

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

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

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

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

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

rotateOfWorld ( worldOrigin: IPointData, addRotation: number, transition?: ITranstion )

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

归属

UI

示例

通过 rotateOf() 旋转元素

// #通过 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)

通过 rotateOf() 旋转元素，有动画过渡

// #通过 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)