Kinetic.js 使用弧的自定义命中区域答案

【问题标题】：Kinetic.js custom hit region using arcKinetic.js 使用弧的自定义命中区域
【发布时间】：2014-03-14 09:51:32
【问题描述】：

三个月以来我一直在研究 KinaticJS（最新版本）。

我遇到了使用 arc() 函数自定义命中区域的问题。我想要完全如下图所示的命中区域。

我正在使用以下代码，但它需要整个小弧作为命中区域。我只需要图像中显示的暗（黑色）部分作为命中区域。

drawHitFunc: function(context) {          
    context.beginPath();
    var x = 90;
    var y = 100;
    var radius = 67;
    var startAngle = 1 * Math.PI;
    var endAngle = 2.0 * Math.PI;
    var counterClockwise = false;
    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    context.fillStrokeShape(this);
},

任何人都可以就此提出建议。

提前感谢您的时间和考虑。 -奈蒂克

【问题讨论】：

能提供jsfiddle吗？
嗨 lavrton，感谢您再次帮助我。我以某种方式做到了，但我认为这不是正确的编码方式（缺少某些东西）需要对此进行微调。 jsfiddle.net/ewebkraft/zPLkn .如果有更漂亮的东西请告知。

标签： html5-canvas kineticjs

【解决方案1】：

您可以尝试使用cache 和drawHitFromCache：http://jsfiddle.net/lavrton/zPLkn/1/

circularText23.cache({
    x : -67 - 5,
    y : - 67 + -5,
    width : 132 + 15,
    height : 132 + 10
});
circularText23.drawHitFromCache();

【讨论】：

感谢好友及时回复。
您好，sceneFunc 在应用点击事件时似乎没有调用。jsfiddle.net/zPLkn/2 请告知。
因为形状被缓存了。更改场景功能前使用shape.clearCache();。