在画布 Fabric.js 上模拟 mousedown 事件答案

【问题标题】：Simulate mousedown event on canvas Fabric.js在画布 Fabric.js 上模拟 mousedown 事件
【发布时间】：2016-12-13 17:09:08
【问题描述】：

我在这里有一个基本设置来测试 Fabric.js 画布上的鼠标按下，我正在尝试通过 javascript（而不是通过鼠标单击）手动触发鼠标事件以模拟画布上的单击。

HTML

<canvas id="c"></canvas>
<a id="testClick" href="javascript:void(0)">Test</a>

Javascript

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

$("#testClick").click(function() {
   var e = jQuery.Event("mousedown", {
     pageX: 700,
     pageY: 300
   });
   $('#c').trigger(e);
});

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

到目前为止，还没有任何东西可以让我模拟这个，感谢帮助。

【问题讨论】：

触发器位于外壳外部，因此无法触及“e”。放置变量 e;外壳外。变量 e; $("#c").click(function() { e = jQuery.Event("mousedown", {....
@LeroyThompson 你指的是什么外壳？它们在 click() 的同一个外壳中；
等一下，让我参考一个 jsfiddle...
是的 ehhemm 画布变量必须是 jQuery 定义的一部分。 jsfiddle.net/zo98p72L/10 jQuery 框架因此可以在 jquery 选定元素上使用触发器。

标签： javascript canvas fabricjs

【解决方案1】：

var canvas 变量必须是 jQuery 定义的一部分。但我看到它是织物的一部分。因此 .trigger() 不能用于该定义。

.trigger() 是 jQuery 框架，因此它可以用于 jquery selected element$。

更新

https://jsfiddle.net/zo98p72L/14/

因为这已经被投票了 2 次strong> - 我决定发布这个。

【讨论】：

嗯，我认为事件和触发器函数只是调用您指定的事件。不知道他们需要成为其他库的一部分才能调用它们。谢谢我开始寻找不同的方向。

【解决方案2】：

您可以直接在 Fabric 画布对象上触发事件，将参数作为第二个参数传递：

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

fCanvas.on("mouse:down", function(e) {
  alert("you clicked me here ("+e.pageX+","+e.pageY+")");
});

fCanvas.trigger("mouse:down", {
    pageX: 700,
    pageY: 400
});

【讨论】：