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

目前，没有公共API。但是你仍然可以在某个地方添加热门画布并查看它的外观：

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

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

或者，您可以在舞台顶部添加命中画布并应用不透明度以使场景画布可见：

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