动画形状内的KineticJS单击检测

Question

好的，我承认我试图变得聪明：我想，如果我覆盖Shape的drawFunc属性，我可以简单地在矩形内绘制任何内容，并且仍然使用KineticJS的点击检测。 这是我的尝试：

var shape = new Kinetic.Shape({
  drawFunc: function(context) {
    var id = 26;  // Id of a region inside composite image.
    context.beginPath();
    context.rect(0, 0, w, h);
    context.closePath();
    this.fill(context);
    this.stroke(context);
    context.drawImage(copyCanvas, (id % 8) * w, flr(id / 8) * h, 
        w, h, 0, 0, w / 2, h / 2);
  },
  draggable: true
});

因此，该想法是绘制一个矩形，并使用drawImage（）在矩形顶部绘制一些内容（类似于纹理，不同之处在于它会不时更改，因为copyCanvas本身会更改）。 同时，我希望事件处理（尤其是拖放）仍然可以正常工作。 好吧，这就是发生的情况：我的drawImage（）未覆盖的矩形部分可以正确检测到点击。 但是，图像所覆盖的矩形的四分之一拒绝响应点击！ 现在，我的问题是为什么？ 我研究了KineticJS代码，对我来说，单击检测只是意味着绘制到缓冲区并查看给定的x，y点是否具有非零的alpha。 我看不到在矩形上方绘制图像会如何影响它。

有什么想法吗？

Answer 1

好的，所以我继续看一下源代码。 这是明确的答案：

KineticJS为使用从RGB颜色到形状对象的全局映射创建的每个形状分配随机且唯一的RGB颜色。 形状的draw()函数被调用两次：一次使用“真实”画布，一次使用“缓冲区”画布用于命中检测。 当使用“缓冲”画布时，KineticJS将笔触和填充颜色切换为给定形状的唯一RGB颜色。 同一“缓冲”画布用于图层上的所有形状。 因此，命中检测简单地变成了读取给定点的RGB值并在全局地图中查找相应的形状。 现在，在我的示例中，我以一种规避KineticJS混杂用于命中检测的颜色的方式绘制了图像。 因此，当我单击图像区域时，KineticJS在缓冲画布上看到一些未知的RGB颜色，但未分配任何已知的形状。

解决方案不是在“缓冲”（或“命中检测”）阶段绘制图像：一个简单的矩形即可。 如果您想知道，这是drawFunc的正确代码：

var width = 200;
var height = 100;
var myShape = new Kinetic.Shape({
  drawFunc: function(context) {
    if (layer.bufferCanvas.context == context) {
      context.beginPath();
      context.rect(0, 0, width, height);
      context.closePath();
      this.fill(context);
      this.stroke(context);
     } else {
       context.drawImage(someCanvasWithAnythingOnIt, 0, 0, width, height,
         0, 0, width, height);
     }
  }});

我可以收取我自己的奖励吗？

Answer 2

我认为您的问题出在顺序上。 您绘制的每个对象都有一个深度，默认顺序就像堆栈一样，最后绘制在最上面。 既然您已经修改了代码，在形状绘制函数中进行了2次绘制，我仍然认为顺序已保留，因此该对象无法检测到输入。 尝试更改顺序，即先绘制图像，然后绘制矩形，然后看问题是否解决。 另外，以jsFiddle为例。