我能够在触发时获得 jquery 响应,但 fabric Canvas 未对事件起作用。
我希望这个 fiddle 取消选择 IText 元素:
我知道织物 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
最佳答案
仅通过 Fabric 的 trigger
触发事件是不够的。 Fabric 对象发出的事件不用于触发内部逻辑,因此除非您想触发自己的事件处理程序,否则触发它们不会有任何好处。
我不熟悉 jQuery 的事件,但您可以使用标准 JS 来做同样的事情 MouseEvent constructor .只要确保您:
- 触发适当的事件类型(即
'mousedown'
,而不是'click'
) - 在适当的 DOM 元素上调度它(即 Fabric 的上层 Canvas ,可通过
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>
关于javascript - 如何在 fabric.js 中触发鼠标事件来模拟鼠标操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53558659/