Fabric js Objekt bei Rechtsklick auswählen

Question

Ich versuche, das Klicken mit der rechten Maustaste verhält sich wie die linke Maustaste beim Klicken auf Objekte. Dies ist der Code Ich habe das Spiel mit:

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

Aber es ist nicht so verhalten, wie ich dachte, es würde. Wenn Sie mit der rechten Maustaste auf ein Objekt klicken, wird das Objekt nicht ausgewählt, aber anschließend werden fortlaufend Elemente im Schwebezustand ausgewählt.

Ich, vielleicht naiv, nahm an, dass das Hover-Ereignis nur einmal mit einem Rechtsklick aktiv wäre.

Answer 1

Solange Sie nur mit Objekten arbeiten, sollte diese Arbeit:

$(".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; 
}); 

Wenn ein Benutzer direkt in die Leinwand klickt, erhält sie die (x, y) Koordinaten des Klicks. Dann durchsucht es alle Objekte in der Arbeitsfläche und wählt ein Objekt aus, wenn es den Punkt enthält. Ich glaube, dass Fabric die Z-Reihenfolge in umgekehrter Reihenfolge in der Objektliste beibehält, also sollte dies respektiert werden, da es rückwärts durch die Liste geht. Wenn der Klick kein Objekt auswählt, werden alle ausgewählten Objekte abgewählt. Schließlich verhindert es den Standardwert und gibt false zurück, um zu verhindern, dass das normale Popup-Popup mit der rechten Maustaste auftritt.

Dies sollte ziemlich gut mit Objekten funktionieren, aber es wird wahrscheinlich nicht sehr gut mit Gruppen arbeiten.