React Konva自定义形状拖拽后如何更新位置？

在React Konva里，普通形状（比如Rect、Circle）拖拽后用e.target.position()能直接拿到正确的全局位置，但自定义形状（Custom）这么用却只返回相对初始绘制点的偏移，手动加初始位置还会跑偏，核心问题出在自定义形状的坐标系和偏移设置上。

问题根源 #

自定义形状默认是以自身绘制的(0,0)点作为坐标原点，而Konva的拖拽事件返回的position是相对于这个原点的偏移量，不是全局画布的位置。如果绘制自定义形状时没有设置正确的offset，就会导致拖拽后的位置计算混乱。

解决步骤 #

1. 在自定义形状的draw方法中设置offset
   绘制完自定义图形后，获取它的边界框（bbox），把offset设置为边界框的左上角或者中心，让形状的坐标原点和视觉位置对齐。比如绘制一个矩形：

   const CustomShape = () => {
     return (
       <Custom
         draggable
         onDragEnd={(e) => {
           // 现在这里就能拿到正确的全局位置了
           const pos = e.target.position();
           console.log(pos.x, pos.y);
           // 直接用这个值更新你的状态即可
         }}
         draw={(context) => {
           context.beginPath();
           // 假设从(0,0)开始绘制一个宽100高50的矩形
           context.rect(0, 0, 100, 50);
           context.fillStyle = 'red';
           context.fill();
           // 获取形状的边界框
           const bbox = context.getBoundingClientRect();
           // 设置offset为边界框的左上角，让形状的position对应左上角位置
           e.target.offsetX(bbox.left);
           e.target.offsetY(bbox.top);
           // 如果想让position对应中心位置，就设置为bbox.width/2和bbox.height/2
           // e.target.offsetX(bbox.width / 2);
           // e.target.offsetY(bbox.height / 2);
         }}
       />
     );
   };
   

2. 直接使用拖拽事件返回的position更新状态
   当offset设置正确后，e.target.position()返回的就是全局画布中的正确位置，不需要再手动和初始位置相加。你可以直接把这个值赋值给组件的状态，用来控制自定义形状的位置。

3. 避免手动计算位置偏移
   不要尝试自己累加初始位置和拖拽偏移，Konva的拖拽系统已经帮你处理了位置计算，只要offset设置正确，直接用e.target.x()、e.target.y()或者position()就能拿到正确值。

额外提示 #

如果你的自定义形状是动态生成的（比如根据props绘制不同的图形），记得在draw方法中每次都重新计算并设置offset，确保拖拽时的坐标始终对齐。

内容的提问来源于stack exchange，提问作者Ted