[英]Fabric.js right mouse click
有没有办法在 Fabric.js 画布上接收鼠标右键单击事件?
以下代码仅适用于左键单击:
canvas.observe('mouse:down', function(){console.log('mouse down'));
注意:上面的大多数答案都已过时; 此答案适用于最新的 Fabric 版本 2.7.0
可以在此处为fireRightClick
和此处为fireMiddleClick
找到用于在画布中触发右键单击和中间单击事件的配置,并且默认设置为false
。 这意味着右键和中键单击事件默认是禁用的。 可以在此处找到用于在右键单击时停止上下文菜单显示在画布上的参数stopContextMenu
您可以通过在创建画布时设置值来启用这些:
var canvas = new fabric.Canvas('canvas', {
height: height,
width: width,
fireRightClick: true, // <-- enable firing of right click events
fireMiddleClick: true, // <-- enable firing of middle click events
stopContextMenu: true, // <-- prevent context menu from showing
});
现在您的mousedown
事件将为所有点击触发,您可以通过使用事件上的按钮标识符来区分它们:
canvas.on('mouse:down', (event) => {
if(event.button === 1) {
console.log("left click");
}
if(event.button === 2) {
console.log("middle click");
}
if(event.button === 3) {
console.log("right click");
}
}
object.on('mousedown', (event) => {
if(event.button === 1) {
console.log("left click");
}
if(event.button === 2) {
console.log("middle click");
}
if(event.button === 3) {
console.log("right click");
}
}
单击对象时,您可以通过 event.e 到达“真正的”鼠标 dom 事件:
if(event.button === 3){
console.log(event.e);
}
我通过扩展 fabric.Canvas 类实现了右键单击。 看看这里的_onMouseDown
方法。
基本上,默认情况下,fabricjs 中禁用了对象的鼠标右键按下事件。
如果要处理右键单击(在画布或其对象上),请在上画布元素上设置上下文菜单侦听器。 使用画布方法 findTarget 您可以检查是否单击了任何目标,如果是,则可以检查目标的类型。
let scope = this;
jQuery(".upper-canvas").on('contextmenu', function (options: any) {
let target: any = scope.canvas.findTarget(options, false);
if (target) {
let type: string = target.type;
if (type === "group") {
console.log('right click on group');
} else {
scope.canvas.setActiveObject(target);
console.log('right click on target, type: ' + type);
}
} else {
scope.canvas.discardActiveObject();
scope.canvas.discardActiveGroup();
scope.canvas.renderAll();
console.log('right click on canvas');
}
options.preventDefault();
});
我这样做的方法是监听整个画布上的右键单击事件,并将单击事件的 x,y 坐标与当前位于给定位置的对象相匹配。 这个解决方案感觉有点像黑客,但嘿,它有效!
$('#my_canvas').bind('contextmenu', function (env) {
var x = env.offsetX;
var y = env.offsetY;
$.each (canvas._objects, function(i, e) {
// e.left and e.top are the middle of the object use some "math" to find the outer edges
var d = e.width / 2;
var h = e.height / 2;
if (x >= (e.left - d) && x <= (e.left+d)) {
if(y >= (e.top - h) && y <= (e.top+h)) {
console.log("clicked canvas obj #"+i);
//TODO show custom menu at x, y
return false; //in case the icons are stacked only take action on one.
}
}
});
return false; //stops the event propigation
});
这是我所做的,它利用了一些内置的织物对象检测代码:
$('.upper-canvas').bind('contextmenu', function (e) {
var objectFound = false;
var clickPoint = new fabric.Point(e.offsetX, e.offsetY);
e.preventDefault();
canvas.forEachObject(function (obj) {
if (!objectFound && obj.containsPoint(clickPoint)) {
objectFound = true;
//TODO: whatever you want with the object
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.