動畫形狀內的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為例。