FabricJS nesnelerin üzerine çift tıklayın

Question

Kullanıcı tuvalin içinde bulunan herhangi bir nesneyi çift tıklattığında özel bir işlem yapmaya çalışıyorum. Dokümanları okudum ve dökümanlarda mouse:dblclick benzeri bir olay bulunamadı. DblClick olayı tetiklemek yapar ama tuval tıklanmaktadır gerçek nesne hakkında özel bilgiler vermez

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

: Ben böyle bir şey yaptığını çalıştı.

Bunu yapmanın en fazla FabricJS-y yolu ile ilgili herhangi bir fikir var mı?

html dosyasına kod parçacığını aşağıdaki ekle -

Answer 1

daha zarif bir yolu DblClick destekleyeceğini ben ettik

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

eklemek fabric.Canvas._initEventListeners geçersiz kılmaktır https://github.com/mazong1123/fabric.ext

Answer 2

İşte Kumaş JS bir çift tıklama olay işleyicisi eklemek için hızlı ve kolay bir yoludur.

canvas.dblclick(function(e) { 

}); 

tıklanmaktadır gerçek nesne hakkında bilgi almak için: Sadece bu

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

Sonra çift tıklama olayını dinlemek için bu kodu ekleyin ana fabric.js kütüphanesinden sonra yüklendiğinden emin tuval, aşağıdaki yöntemi kullanın -

canvas.getActiveObject(); 

örn.

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

Answer 3

Bu geçici çözümü kullanıyorum:

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

için

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

Fabric.js özel etkinlik ekleme Doğru yol da fabricjs cevapsız fazla etkinlik uygulamak için bir kütüphane geliştirdi

veya fabric.ext kullanın

Answer 5

Bu, LeoCreer'in yanıtına benzer ancak aslında Hedeflenen nesneye erişimini

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