FabricJS Doppelklick auf Objekte

Question

Ich versuche eine spezielle Aktion auszuführen, wenn der Benutzer auf ein Objekt doppelklickt, das sich innerhalb der Zeichenfläche befindet. Ich habe die Dokumente gelesen und kein mouse:dblclick ähnliches Ereignis in der Dokumentation gefunden. Ich habe versucht, etwas zu tun, wie:

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

, die das dblclick Ereignis auslöst, aber keine spezifischen Informationen über das eigentliche Objekt geben, die auf der Leinwand angeklickt wird.

Irgendwelche Ideen der meisten FabricJS-y dies zu tun?

Answer 1

Der elegantere Weg ist fabric.Canvas._initEventListeners außer Kraft setzen die dblclick Unterstützung

_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 
 
    }); 
 
    } 
 
}

Ich habe hinzufügen entwickelt eine Bibliothek, um weitere Ereignisse zu implementieren in fabricjs verpasst: https://github.com/mazong1123/fabric.ext

Answer 2

Hier ist eine schnelle und einfache Möglichkeit, ein Doppelklick auf Ereignishandler Fabric JS hinzufügen -

Fügen Sie folgende Code-Schnipsel in Ihre HTML-Datei. Einfach sicher, dies nach der Haupt fabric.js Bibliothek geladen wird

<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> 

Dann diesen Code hinzufügen, ein Doppelklickereignis zu hören:

canvas.dblclick(function(e) { 

}); 

Um Informationen über das eigentliche Objekt zu erhalten, die auf dem geklickt wird Leinwand, folgende Methode verwenden -

canvas.getActiveObject(); 

z.

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

Answer 3

Ich verwende diese Abhilfe:

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

der richtige Weg, benutzerdefinierte Ereignisse Fabric.js

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

hinzufügen

oder verwenden Sie fabric.ext

Answer 5

Dies ist ähnlich wie @ LeoCreer Antwort aber tatsächlich bekommen s Zugriff auf das anvisierte Objekt

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