提问人:ohad lazar 提问时间:10/24/2023 更新时间:10/25/2023 访问量:23
组在被拖动时消失 react-konva
group disappears while being dragged react-konva
问:
目前正在使用脚本类型处理 react-konva 项目,尝试拖动一个组(它有一个文本和一个矩形容器..) ,我为 onDragMove、End 和 start 创建了一些函数,但是每当我开始拖动项目时,它就会消失,当我只拖动文本时就工作了
尝试更改参数,放置任何参数,更改值
DND 的代码:
const handleDragStart = (draggedItem: KonvaEventObject<DragEvent>) => {
if (draggedItem.target.isDragging() === true) {
setStartingX(() => draggedItem.evt.clientX);
setStartingY(() => draggedItem.evt.clientY);
}
draggedItem.target.scaleX(1.5);
draggedItem.target.scaleY(1.5);
};
const handleDragMove = (draggedItem: KonvaEventObject<DragEvent>) => {
const x = draggedItem.evt.clientX;
const y = draggedItem.evt.clientY;
if (x < 0) {
draggedItem.target.absolutePosition({
x: startingX,
y: startingY,
});
} else if (y > height - 50) {
draggedItem.target.absolutePosition({
x: startingX,
y: startingY,
});
} else if (y < 0) {
draggedItem.target.absolutePosition({
x: startingX,
y: startingY,
});
} else if (x > width - 200) {
draggedItem.target.absolutePosition({
x: startingX,
y: startingY,
});
} else {
draggedItem.target.absolutePosition({
x: Math.round(x / blockSnapWidthSize) * blockSnapWidthSize,
y: Math.round(y / blockSnapHeightSize) * blockSnapHeightSize,
});
}
draggedItem.target.scaleX(1.5);
draggedItem.target.scaleY(1.5);
};
const handleDragEnd = (draggedItem: KonvaEventObject<DragEvent>) => {
const x = draggedItem.evt.clientX;
const y = draggedItem.evt.clientY;
if (x < 0) {
draggedItem.target.position({
x: startingX,
y: startingY,
});
} else if (y > height - 50) {
draggedItem.target.position({
x: startingX,
y: startingY,
});
} else if (y < 0) {
draggedItem.target.position({
x: startingX,
y: startingY,
});
} else if (x > width - 200) {
draggedItem.target.position({
x: startingX,
y: startingY,
});
} else {
draggedItem.target.position({
x: Math.round(x / blockSnapWidthSize) * blockSnapWidthSize,
y: Math.round(y / blockSnapHeightSize) * blockSnapHeightSize,
});
}
draggedItem.target.scaleX(1);
draggedItem.target.scaleY(1);
};
答:
0赞
lavrton
10/25/2023
#1
我认为你不应该使用 . 引用鼠标相对于页面位置的本机事件。相对于 konva 阶段,该位置可能与节点的坐标相距很远。draggedItem.evt.clientX
evt.clientX
最好使用 konva 方法来获取仓位,例如:
const handleDragMove = (event: KonvaEventObject<DragEvent>) => {
const node = event.target;
const pos = node.position();
const absPos = node.absolutePosition();
// reset of your code
};
评论
0赞
ohad lazar
10/26/2023
我已经按照你说的改变了,谢谢你让我看到了更好的开发方式(:,但遗憾的是它没有解决我的问题,它仍然令人失望......
0赞
lavrton
10/27/2023
然后,@ohadlazar制作一个清晰的在线演示来显示问题
评论