Konva - 可视化自定义命中区域

Question

是否有一种简单的方法来可视化自定义点击区域形状？

如此处所述
https://konvajs.github.io/docs/events/Custom_Hit_Region.html
hitFunc 属性可以设置为使用提供的上下文绘制自定义命中区域/区域的函数。像这样：

var star = new Konva.Star({
  ...
  hitFunc: function (context) {
    context.beginPath()
    context.arc(0, 0, this.getOuterRadius() + 10, 0, Math.PI * 2, true)
    context.closePath()
    context.fillStrokeShape(this)
  }
})

出于调试目的，我想要一种简单的方法来切换形状（在本例中为圆圈）的视觉呈现，例如将其填充为黄色。

谢谢:)

Answer 1

目前没有 public API。但是您仍然可以将 hit canvas 添加到页面的某处并查看它的外观：

const hitCanvas = layer.hitCanvas._canvas;
document.body.appendChild(hitCanvas);
// disable absolute position:
hitCanvas.style.position = '';

http://jsbin.com/mofocagupi/1/edit?js,output

或者您可以在舞台顶部添加点击 canvas 并应用不透明度使场景 canvas 可见：

const hitCanvas = layer.hitCanvas._canvas;
stage.getContainer().appendChild(hitCanvas);
hitCanvas.style.opacity = 0.5;
hitCanvas.style.pointerEvents = 'none';

http://jsbin.com/gelayolila/1/edit?js,output

Konva - 可视化自定义命中区域

Konva - visualize custom hit area

konvajs