在canvas Fabric.js上模拟mousedown事件

Question

I got a basic setup here to test for mouse down on Fabric.js canvas and I am trying to manually trigger a mouse event via javascript (not via mouse click) to simulate a click on the canvas.

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

So far there is nothing that enables me to simulate this, help appreciated.

Answer 1

var canvas variable has to be part of jQuery definition. But I see it's is part of fabric. Therefore .trigger() cannot be used on that definition.

.trigger() is jQuery framework therefore it could be used on jquery selected element$.

UPDATE

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

Since this has been voted up 2 times - I decided to post this.

Answer 2

You can fire the events directly on the Fabric canvas object, passing arguments as a second parameter:

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