FabricJS双击对象 [英] FabricJS double click on objects

问题描述

每当用户双击位于画布内部的任何对象时，我都试图执行特殊操作.我已经阅读了文档，但在文档中未发现任何类似mouse:dblclick的事件.我尝试做类似的事情:

I am trying to perform a special action whenever the user double clicks any object located inside the canvas. I have read the docs and not found any mouse:dblclick-like event in the documentation. I tried doing something like:

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

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

Which does trigger the dblclick event but does not give specific information about the actual object that is being clicked on the canvas.

对大多数FabricJS-y方式有什么想法吗?

Any ideas of the most FabricJS-y way of doing this?

推荐答案

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

The more elegant way is to override fabric.Canvas._initEventListeners to add the dblclick support

_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

I've also developed a library to implement more events missed in fabricjs : https://github.com/mazong1123/fabric.ext

这篇关于FabricJS双击对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！