应用配置
基础 视口类型 画布 点按 多点 触屏 滚轮 平移视图 缩放视图
缩放视图相关配置,应用运行中修改 app.config.zoom 立即生效。
关键属性
zoom.disabled: boolean
是否禁用缩放视图,默认为 false。
zoom.min: number
视图最小缩放比例, 默认为 0.02。
zoom.max: number
视图最大缩放比例, 默认为 256。
示例
控制视图缩放范围
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件
const app = new App({
view: window,
tree: { type: 'viewport' },
zoom: { min: 0.02, max: 256 }
})
app.tree.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }))
ts
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件
const leafer = new Leafer({
view: window,
type: 'viewport',
zoom: { min: 0.02, max: 256 }
})
leafer.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }))