缩放平移视图
通过滚轮/触摸板滑动或捏合可缩放平移视图，类似浏览器、设计软件的视口交互功能。
引擎默认为 block 场景类型， 可通过配置 leafer.config.type 快速更改视口类型，自动添加相应场景的交互逻辑。
注意事项
需安装 视口插件 才能使用， 或直接安装 leafer-editor（已集成此插件）。
另通过 视图控制插件 / 滚动条插件 可以便捷控制视图，支持居中显示内容、聚集到指定元素。
手动缩放平移视图
通过修改 Leafer 视口属性 / App 视口属性 的 x、y、scale、scaleX、scaleY 可缩放平移视图。
viewport 视口类型
通过滚轮/触摸板滑动或捏合可缩放平移视图，会阻止默认 原生右键菜单。
平移视图操作
- 移动端/触摸板: 双指滑动。
- 鼠标: 滚轮（纵向滚动），Shift + 滚轮（横向滚动）。
更多配置请看 app.config.move， 提供了丰富的配置功能，涵盖各种场景。
缩放视图操作
- 移动端/触摸板: 双指捏合。
- 鼠标: Ctrl / Command + 滚轮。
更多配置请看 app.config.zoom / app.config.wheel。
ts
ts
ts
// #应用与引擎配置 - viewport 视口类型 [实现原理] import { App, Rect, MoveEvent, ZoomEvent } from 'leafer-ui' import '@leafer-in/viewport' // 导入视口插件 const app = new App({ view: window, // 以下配置及事件监听 = tree: { type: 'viewport' } // tree: {}, wheel: { preventDefault: true }, // 阻止浏览器默认滚动页面事件 touch: { preventDefault: true }, // 阻止移动端默认触摸屏滑动页面事件 pointer: { preventDefaultMenu: true } // 阻止浏览器默认菜单事件 }) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200)) // 平移视图 // app.tree.on(MoveEvent.BEFORE_MOVE, (e: MoveEvent) => { app.tree.zoomLayer.move(app.tree.getValidMove(e.moveX, e.moveY)) }) custom 视口类型
在 viewport 视口 功能上，自定义缩放平移的处理逻辑。
ts
// #应用与引擎配置 - custom 视口类型 [App] import { App, Rect, MoveEvent, ZoomEvent } from 'leafer-ui' import '@leafer-in/viewport' // 导入视口插件 const app = new App({ view: window, tree: { type: 'custom' } // 给 tree 层添加自定义视口 // }) // 需要自定义平移视图逻辑 // app.tree.on(MoveEvent.BEFORE_MOVE, (e: MoveEvent) => { const { x, y } = app.tree.getValidMove(e.moveX, e.moveY) app.tree.zoomLayer.move(x, y) }) ts
// #应用与引擎配置 - custom 视口类型 [Leafer] import { Leafer, Rect, MoveEvent, ZoomEvent } from 'leafer-ui' import '@leafer-in/viewport' // 导入视口插件 const leafer = new Leafer({ view: window, type: 'custom' // 添加自定义视口 // }) // 需要自定义平移视图逻辑 // leafer.on(MoveEvent.BEFORE_MOVE, (e: MoveEvent) => { const { x, y } = leafer.getValidMove(e.moveX, e.moveY) leafer.zoomLayer.move(x, y) }) ts
// #应用与引擎配置 - custom 视口类型 [实现原理] import { App, Rect } from 'leafer-ui' import '@leafer-in/viewport' // 导入视口插件 const app = new App({ view: window, // 以下配置 = tree: { type: 'custom' } // tree: {}, wheel: { preventDefault: true }, // 阻止浏览器默认滚动页面事件 touch: { preventDefault: true }, // 阻止移动端默认触摸屏滑动页面事件 pointer: { preventDefaultMenu: true } // 阻止浏览器默认菜单事件 }) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))design 视口类型
在 viewport 视口 功能上，增加了按住鼠标中键 / 空格键 + 拖拽 平移视图的功能，并限制缩放范围为 0.01 ～ 256，适合图形编辑、设计类产品。
ts
ts
ts
// #应用与引擎配置 - design 视口类型 [实现原理] import { App, Rect } from 'leafer-ui' import '@leafer-in/viewport' // 导入视口插件 const app = new App({ view: window, // 以下配置 = tree: { type: 'design' }, // tree: { type: 'viewport' }, // 添加基础视口 zoom: { min: 0.01, // 视图缩放范围 max: 256 }, move: { holdSpaceKey: true, // 按住空白键拖拽可平移视图 holdMiddleKey: true, // 按住滚轮中键拖拽可平移视图 } }) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))document 视口类型
在 viewport 视口 功能上，限制了在有效内容区域内滚动，并限制缩放范围为 1 ～ ∞，适合文档类产品。
ts
// #应用与引擎配置 - document 视口类型 [App] import { App, Rect } from 'leafer-ui' import '@leafer-in/viewport' // 导入视口插件 const app = new App({ view: window, tree: { type: 'document' } // 给 tree 层添加视口 // }) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200)) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 600, 200, 200)) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 1200, 200, 200)) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 1800, 200, 200))ts
// #应用与引擎配置 - document 视口类型 [Leafer] import { Leafer, Rect } from 'leafer-ui' import '@leafer-in/viewport' // 导入视口插件 const leafer = new Leafer({ view: window, type: 'document' // 添加视口 // }) leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200)) leafer.add(Rect.one({ fill: '#32cd79' }, 100, 600, 200, 200)) leafer.add(Rect.one({ fill: '#32cd79' }, 100, 1200, 200, 200)) leafer.add(Rect.one({ fill: '#32cd79' }, 100, 1800, 200, 200))ts
// #应用与引擎配置 - document 视口类型 [实现原理] import { App, Rect } from 'leafer-ui' import '@leafer-in/viewport' // 导入视口插件 const app = new App({ view: window, // 以下配置 = tree: { type: 'document' } , // tree: { type: 'viewport' }, // 添加基础视口 zoom: { min: 1 }, // 视图缩放范围 move: { scroll: 'limit' } // 限制在有内容的区域内滚动 }) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200)) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 600, 200, 200)) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 1200, 200, 200)) app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 1800, 200, 200))移动端手势控制元素
图形编辑器 可以配置 moblie 模式 及 手势控制元素。
也可以自己监听 视口交互事件 实现手势控制元素（需 阻止事件冒泡）。
监听视口变化
引擎可以通过 PropertyEvent 事件监听 Leafer 视口属性 / App 视口属性 的 x、y、scaleX、scaleY 变化来同步相关逻辑。
Leafer 实例作为 缩放平移层 时，可直接监听自身 视图变化事件。