如何在fabric.js中触发鼠标事件以模拟鼠标操作？

Question

我可以在触发事件时获取jQuery响应，但是fabric canvas不会对该事件做出反应。

我希望这个小例子可以取消选择IText元素。 fiddle 我知道fabric canvas有一个触发事件，但它也没有起作用。

var canvas = new fabric.Canvas("c");
var test = jQuery("#c");

test.on("mouse:down", function (){
    alert("you clicked me");
  canvas.renderAll();
  debugger;
});

canvas.on({"mousedown": function() {
  alert("you clicked me too");
}});

$("#testClick").click(function() {
  var e = jQuery.Event("mouse:down", {
    pageX: 10,
    pageY: 10
  });
  jQuery(canvas).trigger(e);//Missed - not jquery
  jQuery(jQuery("#c")).trigger(e);
  jQuery(test).trigger(e);
});

/*************** TEXT ****************/
 var text = new fabric.IText('FaBric.js', {
  fontSize: 40,
  textAlign: 'center',
  fontWeight: 'bold',
  left: 128,
  top: 128,
  angle: 30,
  originX: 'center',
  originY: 'center',
  shadow: 'blue -5px 6px 5px',
  styles: {
    0: {
      0: {
        fontSize: 60,
        fontFamily: 'Impact',
        fontWeight: 'normal',
        fill: 'orange'
      }
    }
  }

});

text.setSelectionStyles({
  fontStyle: 'italic',
  fill: '',
  stroke: 'red',
  strokeWidth: 2
}, 1, 5);
canvas.add(text);
canvas.setActiveObject(text);

编辑 1

我尝试使用“mouse:down”和“click”事件，但对象不会取消选择：fiddle 2

- Flemming

Answer 1

这是您 fiddle 的工作版本: https://jsfiddle.net/y74h38av/

现有代码存在的主要问题是您将 jQuery 事件 API 与 Fabric 事件 API 混淆了。Fabric 画布对象不接受 jQuery 事件对象。此外，请注意两个 API 之间的语法差异。jQuery 使用 mousedown，而 Fabric 使用 mouse:down。您可以直接在 Fabric 对象上通过 event 方法访问 Fabric 事件 API。如果您尝试在 jQuery 对象中包装 Fabric 对象，就像您在这里做的一样 jQuery(test).trigger(e);，它将无法工作。

希望能对您有所帮助！

- Neil VanLandingham

---

谢谢你的回答！你说得对，关于jquery的部分没问题，但是画布不会通过取消选择对象来做出反应。我已经尝试使用“click”，但它也没有用。我已经在问题中更新了一个新的fiddle。 - Flemming

Answer 2

仅通过Fabric的trigger触发事件是不够的。 Fabric对象发出的事件不用于触发内部逻辑，因此除非您想触发自己的事件处理程序，否则触发它们没有任何好处。

我不熟悉jQuery的事件，但您可以使用标准JS MouseEvent构造函数 同样做得很好。只需确保：

• 触发适当的事件类型（即'mousedown'而不是'click'）
• 在适当的DOM元素上分派它（即Fabric的上层画布，可通过canvas.upperCanvasEl访问）
• 设置事件的clientX/clientY而不是pageX/pageY

var canvas = new fabric.Canvas("c");

canvas.on({"mouse:down": function(e) {
  console.log("Mouse down", e.e.clientX, e.e.clientY);
  canvas.renderAll();
}});

document.querySelector('#testClick').onclick = function() {
  var evt = new MouseEvent("mousedown", {
    clientX: 15,
    clientY: 15
  });
  canvas.upperCanvasEl.dispatchEvent(evt);
  // same as:
  //document.querySelector(".upper-canvas").dispatchEvent(evt);
}


/*************** TEXT ****************/

var text = new fabric.IText('FaBric.js', {
  fontSize: 40,
  textAlign: 'center',
  fontWeight: 'bold',
  left: 128,
  top: 128,
  angle: 30,
  originX: 'center',
  originY: 'center',
  shadow: 'blue -5px 6px 5px',
  styles: {
    0: {
      0: {
        fontSize: 60,
        fontFamily: 'Impact',
        fontWeight: 'normal',
        fill: 'orange'
      }
    }
  }

});

text.setSelectionStyles({
  fontStyle: 'italic',
  fill: '',
  stroke: 'red',
  strokeWidth: 2
}, 1, 5);
canvas.add(text);
canvas.setActiveObject(text);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<canvas id="c" width="300" height="200"></canvas>
<button id="testClick">Deselect</button>

- shkaper