Question

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

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

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

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

Answer 1

更优雅的方法是覆盖fabric.Canvas._initEventListeners以添加dblclick支持

＆＃13;

_initEventListeners: function() {
  var self = this;
  self.callSuper('_initEventListeners');

  addListener(self.upperCanvasEl, 'dblclick', self._onDoubleClick);
}

＆＃13;

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

＆＃13;

我还开发了一个库来实现在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

Answer 4

我正在使用此解决方法：

  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 5

以下是向Fabric JS添加双击事件处理程序的快捷方法 -

在您的html文件中包含以下代码段。只需确保在主要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>

然后添加此代码以收听双击事件：

canvas.dblclick(function(e) { 

});

要获取有关在画布上单击的实际对象的信息，请使用以下方法 -

canvas.getActiveObject();

例如。

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

Answer 6

我来晚了，但是现在fabricjs有mousedblclick事件。

列出于：http://fabricjs.com/docs/fabric.Object.html

查看所有事件： http://fabricjs.com/events

FabricJS双击对象

6 个答案: