在拖动并释放形状后,我希望它可以按位置闭合。为了测试这一点,我在{x:100, y:100}
处创建了一个形状,然后将其拖动并确实捕捉到0,0
,但这只是我第一次拖动它。下次它将忽略我设置x,y
。
我可能在这里缺少一些基本知识?也许我没有以正确的方式改变存储。在下面的代码中,您可以看到尝试在handleDragend
中设置x和y的三种尝试。
<template>
<div>
<v-stage
ref="stage"
:config="configKonva"
@dragstart="handleDragstart"
@dragend="handleDragend"
>
<v-layer ref="layer">
<v-regular-polygon
v-for="item in list"
:key="item.id"
:config="{
x: item.x,
y: item.y,
sides: 6,
rotation: item.rotation,
id: item.id,
radius: 50,
outerRadius: 50,
fill: 'green',
draggable: true,
}"
></v-regular-polygon>
</v-layer>
</v-stage>
</div>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
list: [],
dragItemId: null,
configKonva: {
width: width,
height: height,
}
};
},
methods: {
handleDragstart(e) {
//
},
handleDragend(e) {
let item = this.list.find(i => i.id === e.target.id());
let snapTo = { x: 0, y: 0}
// Attempt 1
Vue.set(this.list, 0, {
...item,
x: snapTo.x,
y: snapTo.y,
})
// Attempt 2
this.list = this.list.map(function(shape) {
if(shape.id === item.id) {
return {
...item,
x: snapTo.x,
y: snapTo.y,
}
}
})
},
},
mounted() {
this.list.push({
id: 1,
x: 100,
y: 100,
});
}
};
</script>
答案 0 :(得分:1)
vue-konva
仅在模板中有更改时更新节点。
在第一次捕捉时,模板(和存储)中的坐标将从{100, 100}
更改为{0, 0}
。
第二次拖动节点时,存储区仍将{0, 0}
保留在内存中。因此,不会触发任何更改,并且不会将节点移回。
有两种方法可以解决此问题:
handleDragend(e) {
let item = this.list.find(i => i.id === e.target.id());
let snapTo = { x: 0, y: 0 };
e.target.position(snapTo);
e.target.getLayer().batchDraw();
Vue.set(this.list, 0, {
...item,
x: snapTo.x,
y: snapTo.y
});
}
您可能需要将所有仓位更改注册到商店:
handleDragMove(e) {
// do this on every "dragmove"
let item = this.list.find(i => i.id === e.target.id());
Vue.set(this.list, 0, {
...item,
x: e.target.x(),
y: e.target.y()
});
}