FabricJS双击对象

Question

每当用户双击画布内的任何对象时,我都会尝试执行特殊操作.我已阅读文档,但未在文档中找到任何mouse:dblclick类似事件.我尝试过这样的事情:

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

这会触发dblclick事件,但不会提供有关在画布上单击的实际对象的特定信息.

有关FabricJS-y最常用的方法吗？

Answer 1

更优雅的方法是覆盖fabric.Canvas._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

Answer 2

这类似于@ LeoCreer的答案,但实际上可以访问目标对象

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

Answer 3

向Fabric.js添加自定义事件的正确方法

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

或使用fabric.ext