zoom
控制视图的缩放。
关键方法
zoom ( zoomType: IZoomType, padding?: IFourNumber, fixedScale?: boolean ): IBoundsData
zoomType 为缩放类型， 支持放大、缩小、fit、fit-width、fit-height 视图，聚焦元素、区域。
当 zoomType 为 fit、元素、区域时，可以传入 padding 进行四周留白。如果不想缩放画布，只进行位移，可以设置 fixedScale 为
函数返回一个缩放后的焦点区域（世界坐标系）。
ts
type IZoomType =
| 'in' // 放大 (从画布中心缩放)
| 'out' // 缩小
| 'fit' // 缩放到合适大小
| 'fit-width' // 缩放到合适大小，以宽度为主
| 'fit-height' // 缩放到合适大小，以高度为主
| number // 指定缩放比例 (从画布中心缩放)
| IUI // 聚焦到某一个元素
| IUI[] // 聚焦到一组元素
| IBoundsData // 聚焦到指定区域（page坐标系），当宽或高为0时，会自动按画布比例补全归属
Leafer
示例
放大
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import '@leafer-in/view'
const app = new App({ view: window, editor: {} })
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 400))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 400))
setTimeout(() => {
app.tree.zoom('in')
}, 1000)缩小
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import '@leafer-in/view'
const app = new App({ view: window, editor: {} })
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 400))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 400))
setTimeout(() => {
app.tree.zoom('out')
}, 1000)缩放到合适大小
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import '@leafer-in/view'
const app = new App({ view: window, editor: {} })
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 400))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 400))
setTimeout(() => {
app.tree.zoom('fit', 100)
}, 1000)聚焦到指定元素
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import '@leafer-in/view'
const app = new App({ view: window, editor: {} })
const rect = Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 400)
app.tree.add(rect)
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 400))
setTimeout(() => {
app.tree.zoom(rect, [100, 50])
}, 1000)不缩放画布，只进行位移
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import '@leafer-in/view'
const app = new App({ view: window, editor: {} })
const rect = Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100)
app.tree.add(rect)
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100))
setTimeout(() => {
app.tree.zoom(rect, 0, true)
}, 1000)聚焦到指定区域
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import '@leafer-in/view'
const app = new App({ view: window, editor: {} })
app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 400))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 400))
setTimeout(() => {
app.tree.zoom({ x: 650, y: 400, width: 100, height: 100 }, [100, 20, 50, 20])
}, 1000)