FabricJS 双击对象答案

【问题标题】：FabricJS double click on objectsFabricJS 双击对象
【发布时间】：2014-06-18 13:01:28
【问题描述】：

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

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

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

有什么最适合 FabricJS 的方法吗？

【问题讨论】：

标签： fabricjs

【解决方案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

【讨论】：

Jim，我在最新的 Fabric.js 版本 1.4.0 中得到“this.constructor.superclass is null”。加载 Fabric.js 后，我在自己的代码中包含了 fabric.Canvas.prototype._initEventListeners = function() {...} 和 fabric.Canvas.prototype._onDoubleClick = function(e) {...}。我做错了什么？
@user2113581 ，你应该继承 fabric.Canvas 来覆盖 _initEventListeners 和 _onDoubleClick 而不是直接将原型添加到 fabric.Canvas 对象。参见示例：github.com/mazong1123/fabric.ext/blob/master/fabricext/scripts/…
@JimMa 我认为fabric.ext 的东西不再起作用（使用FabricJS 2+）？我尝试批发使用它，似乎没有用。是否可以快速修复升级？您添加的内容似乎非常有用（尽管其中一些现在已直接融入 FabricJS）。

【解决方案2】：

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

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

【讨论】：

我如何获得子目标？

【解决方案3】：

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

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

或使用fabric.ext

【讨论】：

我如何获得子目标？

【解决方案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')
    }
  });

【讨论】：

【解决方案5】：

这是向 Fabric JS 添加双击事件处理程序的快速简便方法 -

在您的 html 文件中包含以下代码 sn-p。只需确保在主 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();
});

【讨论】：

当我尝试缩放事物时，我收到一条错误消息，提示 _setscaleequal 未定义

【解决方案6】：

我迟到了，但现在fabricjs 有mousedblclick 事件。

上市于：http://fabricjs.com/docs/fabric.Object.html

查看所有活动： http://fabricjs.com/events

【讨论】：

fabricObject.on("mousedblclick", ()=>{//your method here})