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

【问题标题】：Konva - visualize custom hit areaKonva - 可视化自定义命中区域
【发布时间】：2018-09-04 15:59:51
【问题描述】：

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

如此处所述
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)
  }
})

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

谢谢:)

【问题讨论】：

标签： konvajs

【解决方案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

【讨论】：