ファブリックjs右クリックでオブジェクトを選択

Question

オブジェクトをクリックすると、マウスの右ボタンをクリックしてマウスの左ボタンのように動作させようとしています。 これは私がで遊んでてきたコードです：

$(".upper-canvas").bind('contextmenu', function (env) { 
    canvas.on('mouse:over', function(e) { 
     canvas.setActiveObject(e.target); 
    }); 
    return false; 
}) 

しかし、私はそれが思った通りに動作しません。 オブジェクトを右クリックした後、オブジェクトは選択されませんが、その後、ホバリング時に連続して要素が選択されます。

私は、おそらく単純に、ホバーイベントは右クリックで1回だけアクティブであると想定していました。

Answer 1

限り、あなただけのオブジェクトで作業しているとして、これは動作するはずです：

$(".upper-canvas").bind('contextmenu', function(ev) { 
    var pointer = canvas.getPointer(ev.originalEvent); 
    var objects = canvas.getObjects(); 
    for (var i = objects.length - 1; i >= 0; i--) { 
     if (objects[i].containsPoint(pointer)) { 
      canvas.setActiveObject(objects[i]); 
      break; 
     } 
    } 

    if (i < 0) { 
     canvas.deactivateAll(); 
    } 

    canvas.renderAll(); 

    ev.preventDefault(); 
    return false; 
}); 

ユーザーは、右のキャンバスでクリックすると、それはクリックの座標（x、y）を取得します。キャンバス内のすべてのオブジェクトを調べ、ポイントが含まれているオブジェクトを選択します。私はファブリックがオブジェクトのリストの逆の順序でzオーダーを保持していると信じています。クリックでオブジェクトが選択されない場合は、選択されたオブジェクトの選択が解除されます。最後に、デフォルトを防ぎ、falseを返して、通常の右クリックポップアップが発生しないようにします。

これはオブジェクトではかなりうまくいくはずですが、おそらくグループでうまく動作しません。