如何在fabric.js中触发鼠标事件来模拟鼠标动作

Question

我能够在触发时获得jquery响应，但结构画布没有对事件执行操作。

我希望这个小提琴取消选择IText元素：

小提琴

我知道织物画布发生了触发事件，但它也不起作用。

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

我尝试过"鼠标：向下"one_answers"点击"事件，但对象没有取消选择：fiddle 2

Answer 1

仅仅通过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>

Answer 2

这是你小提琴的工作叉：https://jsfiddle.net/y74h38av/

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

我希望这能有所帮助！