Skip to content

rotation

元素的旋转属性。

关键属性

rotation: number

旋转角度,取值范围为 -180 ~ 180。

关键方法

注意事项

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

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

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

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

ts
// 围绕中心点继续旋转 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() 旋转元素

ts
// #通过 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() 旋转元素,有动画过渡

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

Released under the MIT License.