6

OK、私は賢くしようとしたことを認めます。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（）によってカバーされていない長方形の部分はクリックを正しく検出します。ただし、画像で覆われている長方形の4分の1は、クリックに応答しません。さて、私の質問はなぜですか？私はKineticJSコードを掘り下げて、クリック検出とは単にバッファーに描画し、指定されたx、yポイントにゼロ以外のアルファがあるかどうかを確認することを意味することを確認しました。長方形の上に画像を描画すると、これがどのように影響を受けるかわかりません。

何が起こっているのかアイデアはありますか？

4

2 に答える 2

2

OK、それで私は先に進んでソースコードを見ました。決定的な答えは次のとおりです。

KineticJSは、RGBカラーからシェイプオブジェクトへのグローバルマップを使用して作成された各シェイプに、ランダムで一意のRGBカラーを割り当てます。シェイプのdraw()関数は2回呼び出されます。1回は「実際の」キャンバスで、もう1回はヒット検出に使用される「バッファ」キャンバスで呼び出されます。「バッファ」キャンバスを使用する場合、KineticJSは、ストロークと塗りつぶしの色を、指定された形状の一意のRGB色に切り替えます。同じ「バッファ」キャンバスが、レイヤー上のすべての形状に使用されます。したがって、ヒット検出は、特定のポイントのRGB値を読み取り、グローバルマップで対応する形状を検索するだけです。さて、私の例では、ヒット検出に使用されるKineticJSの色のジャグリングを回避する方法で画像を描画しました。したがって、画像領域をクリックすると、

解決策は、「バッファ」（または「ヒット検出」）フェーズの画像を描画しないことです。単純な長方形で十分です。ご参考までに、次の正しいコードを次に示し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);
     }
  }});

自分の報酬を集めることはできますか？

于 2012-10-28T20:46:22.863 に答える
0

あなたの問題は順序にある​​と思います。描画する各オブジェクトに関連付けられた深さがあり、デフォルトの順序はスタックのようなもので、最後に描画されたものが一番上になります。コードを変更し、形状描画関数内で2つの描画を行ったので、順序は保持されていると思います。したがって、オブジェクトは入力を検出できません。順序を変更してみてください。つまり、最初に画像を描画し、次に長方形を描画して、問題が解決するかどうかを確認します。それ以外の場合は、例としてjsFiddleを共有します。

于 2012-10-28T12:01:29.763 に答える