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作为例子。

KineticJS在动画形状内单击检测

2 个答案: