FabricJS double-cliquez sur les objets

Question

J'essaye d'effectuer une action spéciale chaque fois que l'utilisateur clique deux fois sur un objet situé à l'intérieur de la toile. J'ai lu les docs et aucun événement similaire à mouse:dblclick n'a été trouvé dans la documentation. J'ai essayé de faire quelque chose comme:

fabric.util.addListener(fabric.document, 'dblclick', callback);

Ce qui ne déclenche l'événement dblclick mais ne donne pas d'informations spécifiques sur l'objet réel qui est cliqué sur la toile.

Des idées de la façon la plus FabricJS-y de le faire?

Answer 1

La façon plus élégante est de passer outre fabric.Canvas._initEventListeners pour ajouter le support dblclick

_initEventListeners: function() { 
 
    var self = this; 
 
    self.callSuper('_initEventListeners'); 
 

 
    addListener(self.upperCanvasEl, 'dblclick', self._onDoubleClick); 
 
}

_onDoubleClick: function(e) { 
 
    var self = this; 
 

 
    var target = self.findTarget(e); 
 
    self.fire('mouse:dblclick', { 
 
    target: target, 
 
    e: e 
 
    }); 
 

 
    if (target && !self.isDrawingMode) { 
 
    // To unify the behavior, the object's double click event does not fire on drawing mode. 
 
    target.fire('object:dblclick', { 
 
     e: e 
 
    }); 
 
    } 
 
}

J'ai également mis au point une bibliothèque pour mettre en œuvre plus d'événements manqués dans fabricjs: https://github.com/mazong1123/fabric.ext

Answer 2

Voici un moyen rapide et facile d'ajouter un double gestionnaire d'événements, cliquez sur le tissu JS -

Inclure suivant extrait de code à votre fichier html. Assurez-vous simplement ceci est chargé après la principale bibliothèque fabric.js

<script type="text/javascript"> 
     fabric = (function(f) { var nativeOn = f.on; var dblClickSubscribers = []; var nativeCanvas = f.Canvas; f.Canvas = (function(domId, options) { var canvasDomElement = document.getElementById(domId); var c = new nativeCanvas(domId, options); c.dblclick = function(handler) { dblClickSubscribers.push(handler) }; canvasDomElement.nextSibling.ondblclick = function(ev){ for(var i = 0; i < dblClickSubscribers.length; i++) { console.log(ev); dblClickSubscribers[i]({ e :ev }); } }; return c; }); return f; }(fabric)); 
</script> 

ajouter ensuite ce code pour écouter un événement double clic:

canvas.dblclick(function(e) { 

}); 

Pour obtenir des informations sur l'objet réel qui est cliqué sur le toile, utiliser la méthode suivante -

canvas.getActiveObject(); 

par ex.

canvas.dblclick(function(e) { 
    activeObject = canvas.getActiveObject(); 
}); 

Answer 3

J'utilise cette solution de contournement:

var timer = 0; 
    canvas.item(0).on('mouseup', function() { 
    var d = new Date(); 
    timer = d.getTime(); 
    }); 
    canvas.item(0).on('mousedown', function() { 
    var d = new Date(); 
    if ((d.getTime() - timer) < 300) { 
     console.log('double click') 
    } 
    }); 

Answer 4

La bonne façon d'ajouter des événements personnalisés à Fabric.js

window.fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function (event, self) { 
    yourFunction(event); 
}); 

ou utiliser fabric.ext

Answer 5

Ceci est similaire à la réponse @ LeoCreer, mais effectivement obtenir s à accès l'objet ciblé

fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function (e) { 
    var target = canvas.findTarget(e); 
});