Konva Group 上的自定义命中检测

Question

我试图扩大一组形状的点击区域，但组上似乎没有 hitFunc 属性。

  var patternControl = new Konva.Group();
  patternControl.hitFunc(function(context) {
      context.beginPath();
      context.arc(0, 0, outerRadius + patternWidth, 0, Math.PI * 2, true);
      context.fillStrokeShape(this);
    });

有什么方法可以将自定义命中函数应用于组？

Answer 1

只有形状可用于命中检测。作为解决方法，您可以使用 shape.listeting(false) 禁用所有形状的命中，然后将 "fake" 形状添加到将用作命中区域的组中：

var patternControl = new Konva.Group();
var hitShape = new Konva.Shape({
  // make it transparent, so it is not visible
  fill: 'rgba(0,0,0,0)',
  hitFunc: (context, shape) => {
      context.beginPath();
      context.arc(0, 0, outerRadius + patternWidth, 0, Math.PI * 2, true);
      context.fillStrokeShape(shape);
  }
});
patternControl.add(hitShape);

Konva Group 上的自定义命中检测

Custom Hit Detection on Konva Group

konvajs