Reactjs 使用鼠标拖放选择形状无效-React Konva

我正在尝试使用

React konva

的

Transformer

创建多个形状选择。它可以很好地使用鼠标点击一个形状，然后点击另一个形状，创建两个形状的完整选择。我希望这是通过鼠标拖放来实现的。为此，我编写了鼠标向上、向下和在舞台上移动并单击的功能，这些功能在中提到。没有错误，但鼠标拖动选择不起作用。我希望选择的工作完全相同的文档演示

---

这是我的演示沙盒。

有很多方法可以做到这一点。我的方式：

const selectionRectRef=React.useRef（）；
const selection=React.useRef({
可见：假，
x1:0，
y1:0，
x2:0，
y2:0
});
const updateselection rect=（）=>{
const node=selectionRectRef.current；
node.setAttrs({
可见：selection.current.visible，
x:Math.min（selection.current.x1，selection.current.x2），
y:Math.min（selection.current.y1，selection.current.y2），
宽度：Math.abs（selection.current.x1-selection.current.x2），
高度：Math.abs（selection.current.y1-selection.current.y2），
填充：“rgba（0，161，255，0.3）”
});
node.getLayer（）.batchDraw（）；
};
const oldPos=React.useRef（null）；
const onMouseDown=（e）=>{
const isElement=e.target.findAncestor（“.elements容器”）；
const isTransformer=e.target.findAncestor（“变压器”）；
if（isElement | | isTransformer）{
返回；
}
const pos=e.target.getStage（）.getPointerPosition（）；
selection.current.visible=true；
selection.current.x1=pos.x；
selection.current.y1=位置y；
selection.current.x2=pos.x；
selection.current.y2=位置y；
updateSelection（）；
};
const onMouseMove=（e）=>{
如果（！selection.current.visible）{
返回；
}
const pos=e.target.getStage（）.getPointerPosition（）；
selection.current.x2=pos.x；
selection.current.y2=位置y；
updateSelection（）；
};
const onMouseUp=（）=>{
oldPos.current=null；
如果（！selection.current.visible）{
返回；
}
const selBox=selectionRectRef.current.getClientRect（）；
常量元素=[]；
layerRef.current.find（“.rectangle”）.forEach（（elementNode）=>{
const elBox=elementNode.getClientRect（）；
if（Konva.Util.haveIntersection（selBox、elBox））{
elements.push（elementNode）；
}
});
trRef.current.nodes（元素）；
selection.current.visible=false；
//禁用单击事件
Konva.listenClickTap=false；
updateSelection（）；
};

---

演示：

那么你的意思是-你复制了一个演示并粘贴到你自己的代码中，但它不起作用？请回顾一下您所做的，您可能引入了一个bug，或者不了解演示的某些方面。一般来说，在这里发布290行密集的非现场代码链接不太可能实现快速回答。在很多人参与之前，你需要做一些工作来制作你的问题的一部分。不，我没有复制和粘贴，演示（）不是用于多个形状的选择，它只是用于选择一个形状和变压器演示。我参考了许多代码并制作了上面的一个。我看了很多遍，但都找不到。这就是我问的原因。嘿，谢谢你激励我再次复习。我把它解决了。现在只是个小虫子。当我选择形状时，它占用了额外的空间。我认为错误在这一行--var shapes=stage.find（“Rect”）.toArray（）你能告诉我怎么了吗？