leafer-ui
leafer-ui copied to clipboard
拖拽的时候元素没有动,但是缩放或者滚动一下画布,元素又按照刚才拖动的动作变换了位置
现象如下:
示例代码如下:
import { App, Leafer, Frame,Box } from 'leafer-ui'
const app = new App({
view: window,
tree: { type: 'viewport' }, // 添加基础视口
zoom: {
min: 0.1, // 视图缩放范围
max: 10,
},
move: {
holdSpaceKey: true, // 按住空白键拖拽可平移视图
holdMiddleKey: true, // 按住滚轮中键拖拽可平移视图
},
})
const taskListLeafer = new Leafer({})
app.tree.add(taskListLeafer)
const taskBox = new Frame({
width: 400,
height: 100,
fill: '#eee',
x: 0,
y: 0,
children: [
{
tag: 'Text',
text: '12312',
fill: 'black',
textAlign: 'center',
verticalAlign: 'middle',
},
],
})
const cell = new Box({
x: 10,
y: 0,
width: 80,
height: 30,
fill: '#1890FF',
cornerRadius: 5,
dragBounds: 'parent', // 限制元素拖动范围
draggable: 'y',
})
taskListLeafer.add(taskBox)
taskBox.add(cell)
App的结构有问题导致的,具体看一下注释代码:
import { App, Frame,Box } from 'leafer-ui'
import '@leafer-in/viewport'
const app = new App({
view: window,
tree: { type: 'viewport' },
zoom: {
min: 0.1, // 视图缩放范围
max: 10,
},
move: {
holdSpaceKey: true,
holdMiddleKey: true,
},
})
// 这里有问题,Leafer实例不能添加给app.tree,具体看一下App的文档和示例
// const taskListLeafer = new Leafer({})
// app.tree.add(taskListLeafer)
const taskListLeafer = app.tree
const taskBox = new Frame({
width: 400,
height: 100,
fill: '#eee',
x: 0,
y: 0,
children: [
{
tag: 'Text',
text: '12312',
fill: 'black',
textAlign: 'center',
verticalAlign: 'middle',
},
],
})
const cell = new Box({
x: 10,
y: 0,
width: 80,
height: 30,
fill: '#1890FF',
cornerRadius: 5,
dragBounds: 'parent',
draggable: 'y',
})
taskListLeafer.add(taskBox)
taskBox.add(cell)