FabricJS дважды щелкните по объектам

Я пытаюсь выполнить специальное действие, когда пользователь дважды щелкает любой объект, находящийся внутри полотна. Я прочитал документы и не нашел никаких mouse:dblclick - подобное событие в документации. Я попытался сделать что-то вроде:

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

который запускает событие dblclick, но не дает конкретной информации о фактическом объекте, который щелкается на холсте.

любые идеи самого FabricJS-y способа сделать это?

9
fabricjs

5 ответов

более элегантный способ-переопределить ткань.Холст._initEventListeners для добавления поддержки 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
    });
  }
}

Я также разработал библиотеку для реализации нескольких событий пропустил в fabricjs : https://github.com/mazong1123/fabric.ext

14

это похоже на ответ @LeoCreer, но на самом деле получает доступ к целевому объекту

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

правильный способ добавления пользовательских событий в ткани.js 

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

или использовать ткани.доб

5

вот быстрый и простой способ добавить обработчик событий двойного щелчка в Fabric JS -

включите следующий фрагмент кода в свой html-файл. Просто убедитесь, что это загружено после основной ткани.библиотека 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>

затем добавьте этот код для прослушивания события двойного щелчка:

canvas.dblclick(function(e) { 

});

чтобы получить информацию о фактическом объекте, который нажимается на холсте, используйте следующий метод -

canvas.getActiveObject();

например. 

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

Я использую этот метод:

  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')
    }
  });
2