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

Konva-可视化自定义匹配区域

1 个答案: