scale

元素的缩放属性。

关键属性

scaleX: number

x 轴缩放比例， 为负数时表示镜像 X 轴。

scaleY: number

y 轴缩放比例，为负数时表示镜像 Y 轴。

计算属性

scale: number ｜ IPointData

快速设置 / 获取 scaleX, scaleY。

rect.scale = 2 // scaleX = 2, scaleY = 2
console.log(rect.scale) // 2

rect.scale = { x: 1, y: 2 } // scaleX = 1, scaleY = 2
console.log(rect.scale) // {x:1, y: 2}

关键方法

注意事项

以下方法为增量操作，且会修改元素的起始坐标，适合图形编辑场景。

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

scaleOf ( origin: IAlign ｜ IPointData, multiplyScaleX: number, multiplyScaleY?: number | ITranstion, resize?: boolean, transition?: ITranstion )

围绕原点 origin（ box 坐标 ）缩放元素 增量操作。

resize 参数可实现缩放操作转宽高值，transition 参数表示是否进行 动画 过渡。

// 围绕中心点继续缩放1.5倍
rect.scaleOf('center', 1.5)

// 想缩放到指定 scale， 需除以元素当前 scale，如下：
rect.scaleOf({ x: 50, y: 50 }, 1.5 / rect.scale)

// 动画过渡
rect.scaleOf('center', 1.5, true) // = rect.scaleOf('center', 1.5, 1.5, false, true)

rect.scaleOf('center', 1.5, { duration: 2 }) // 过渡 2 秒  = rect.scaleOf('center', 1.5, 1.5, false, 2)

scaleOfWorld ( worldOrigin: IPointData, multiplyScaleX: number, multiplyScaleY?: number | ITranstion, resize?: boolean, transition?: ITranstion )

围绕原点 worldOrigin（ 世界坐标 ）缩放元素 增量操作。

resize 参数可实现缩放操作转宽高值，transition 参数表示是否进行 动画 过渡。

归属

UI

示例

通过 scaleOf() 缩放元素

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

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

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

leafer.add(rect)

setTimeout(() => {

    // 围绕中心点继续缩放1.5倍
    rect.scaleOf('center', 1.5) 

}, 1000)

通过 scaleOf() 缩放元素，有动画过渡

// #通过 scaleOf() 缩放元素 [有动画过渡]
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(() => {

    // 围绕中心点继续缩放1.5倍
    rect.scaleOf('center', 1.5, true) 

}, 1000)