在Fabric.js中模拟canvas上的mousedown事件

Question

我这里有一个基本的设置，用于测试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");
}});

到目前为止，我还没有找到可以模拟这个的东西，需要帮助。

- Aeseir

---

触发器位于外部封装之外，因此无法访问“e”。请将变量“e”放在封装之外。var e; $（“＃c”）.click（function（）{ e = jQuery.Event（“mousedown”，{.... - Leroy Thompson

@LeroyThompson 你指的是哪个封装？它们都在 click() 的同一封装中。 - Aeseir

等一下，让我参考一下 jsfiddle... - Leroy Thompson

嗯，canvas变量必须是jQuery定义的一部分。https://jsfiddle.net/zo98p72L/10/因此，jQuery框架可以在所选的jquery元素上触发。 - Leroy Thompson

Answer 1

var canvas变量必须是jQuery定义的一部分。但我发现它是fabric的一部分。因此，无法在该定义上使用.trigger()。

.trigger()是jQuery框架，因此可以在jquery选择的元素$上使用。

更新

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

由于此帖已被投票赞同2次，我决定发布它。

- Leroy Thompson

---

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

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

- aspikmoi