move 配置
平移视图相关配置,应用运行中修改 app.config.move 立即生效。
关键属性
move.disabled: boolean
是否禁用平移视图交互,默认为 false。
move.scroll: boolean
| 'limit'
限制横向或竖向滚动, 默认为 false。
设置 'limit' 会限制在有内容的区域滚动,否则可以无限滚动。
一般用于适配 document、手机端上下滑动页面
move.drag: boolean
| 'auto'
拖拽时是否平移视图,默认为 false。
设置 true, 元素的交互功能将停用,所有地方拖拽将平移视图,一般用于预览模式。
设置 'auto',元素的交互功能仍保留,draggable / editable 元素仍可以单独拖拽,其他地方拖拽将平移视图。
move.dragAnimate: boolean
拖拽视图结束时是否有惯性动画, 默认为 false。
move.holdSpaceKey: boolean
按住空白键拖拽是否平移视图,默认为 true。
move.holdMiddleKey: boolean
按住滚轮中键拖拽是否平移视图,默认为 true。
move.holdRightKey: boolean
按住右键拖拽是否平移视图,默认为 false。
move.dragEmpty: boolean
空白处拖拽是否平移视图,默认为 false。
move.dragOut: boolean
当拖拽元素到达界面边界时,是否自动平移视图,默认为 false。
move.autoDistance: number
设置 dragOut 每帧自动平移视图的距离,默认为 2。
示例
拖拽时直接平移视图(预览模式)
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))
leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 300, 100))
leafer.config.move.drag = true// 预览模式,可在应用运行中实时修改。
拖拽至边界时自动平移视图
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({
view: window,
move: { dragOut: true }
})
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true, })
const rect2 = new Rect({ x: 100, y: 300, fill: '#32cd79', draggable: true, })
leafer.add(rect)
leafer.add(rect2)