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);
     }
  }});

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