使用Konva.js绘制的自定义形状无法拖拽，求解决方向

问题根源 #

Konva的Custom自定义形状不会自动生成交互所需的碰撞检测区域（hit region），拖拽功能需要这个区域来识别鼠标是否点击/悬浮在形状上。你的代码只实现了draw方法绘制视觉效果，但没定义碰撞区域，导致鼠标事件无法触发拖拽逻辑。

两种修复方案 #

方案一：手动编写碰撞检测路径 #

在自定义形状配置里添加hitFunc方法，用和draw完全一致的路径来绘制碰撞区域，让Konva能识别鼠标操作的有效范围：

const customShape = new Konva.Custom({
  x: 50,
  y: 50,
  draggable: true,
  draw: function () {
    const ctx = this.getContext();
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(220, 20);
    ctx.quadraticCurveTo(220, 120, 120, 120);
    ctx.quadraticCurveTo(20, 120, 20, 20);
    ctx.fillStyle = 'red';
    ctx.fill();
  },
  // 新增hitFunc定义碰撞区域
  hitFunc: function (context) {
    context.beginPath();
    context.moveTo(20, 20);
    context.lineTo(220, 20);
    context.quadraticCurveTo(220, 120, 120, 120);
    context.quadraticCurveTo(20, 120, 20, 20);
    context.fill();
  }
});

方案二：利用缓存自动生成碰撞区域 #

如果绘制逻辑复杂，不想重复写路径，可以用cache()缓存形状，再开启drawHitFromCache: true让Konva自动生成碰撞区域：

const customShape = new Konva.Custom({
  x: 50,
  y: 50,
  draggable: true,
  draw: function () {
    const ctx = this.getContext();
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(220, 20);
    ctx.quadraticCurveTo(220, 120, 120, 120);
    ctx.quadraticCurveTo(20, 120, 20, 20);
    ctx.fillStyle = 'red';
    ctx.fill();
  },
  drawHitFromCache: true
});
// 必须调用cache()才能让自动生成生效
customShape.cache();

核心逻辑说明 #

Konva的所有交互（拖拽、点击等）都依赖碰撞检测。内置图形（矩形、圆形等）会自动生成碰撞区域，但自定义形状需要你明确告诉Konva：鼠标点击哪些区域算命中形状，要么手动写hitFunc，要么用缓存自动生成，否则拖拽事件根本触发不了。

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