FabricJS - Meilleure solution pour centrer l'objet sur le curseur lorsqu'il est sélectionné?

Question

Je voudrais que les objets sélectionnables alignent leur centre sur le curseur de la souris lors du clic. La seule modification permise à l'utilisateur dans ce cas est de déplacer l'objet, sans mise à l'échelle, rotation, etc. La seule mise à jour de l'objet sur mousedown ou selected mettra à jour sa position uniquement jusqu'à ce que l'événement moving soit déclenché, où l'objet sera enclenché à sa position d'origine et ensuite commencer à suivre la souris.

rect.on('moving', moveHandler); 
function moveHandler(evt) { 
var mousePnt = $canvas.getPointer(evt.e); 
rect.set({ 
    left:mousePnt.x - rect.width*0.5 , top:mousePnt.y - rect.height*0.5}); 
this.setCoords(); 
} 

C'est ce que je suis venu avec au centre un rectangle sélectionnable sur le curseur, mais je suis certain qu'il a tiré deux événements de mouvement. Y a-t-il un moyen de contourner ce positionnement original. Ou devrais-je plutôt écrire mes propres écouteurs mousedown, mouseup etpour imiter le comportement de glissement par défaut?

Answer 1

Votre solution est correcte si aucune rotation ou mise à l'échelle n'est impliquée.

Vous n'exécutez rien de plus que nécessaire si ce n'est le .setCoords qui pendant un mouvement est facultatif car il sera appelé sur mouseUp lorsque la traduction est terminée.

Si vous voulez prendre l'approche mouseDown, en changeant la position une fois pour toutes, vous pouvez utiliser cette logique:

var canvas = new fabric.Canvas('c'); 
 
canvas.add(new fabric.Rect({width: 50, height: 50})); 
 
canvas.on('mouse:down', function(opt) { 
 
    if (this._currentTransform && opt.target) { 
 
    var target = opt.target; 
 
    target.top = this._currentTransform.ey - target.height/2; 
 
    target.left = this._currentTransform.ex - target.width/2; 
 
    this._currentTransform.left = target.left; 
 
    this._currentTransform.offsetX = this._currentTransform.ex - target.left; 
 
    this._currentTransform.offsetY = this._currentTransform.ey - target.top; 
 
    this._currentTransform.top = target.top; 
 
    this._currentTransform.original.left = target.left; 
 
    this._currentTransform.original.top = target.top; 
 
    this.renderAll(); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script> 
 
<canvas id="c" ></canvas>

Vous devez modifier toutes les informations transformer ce tissu noté bas sur l'événement mouseDown avant que le gestionnaire de votre mousedown ne soit exécuté.