Fabric.js right mouse click

问题

Is there a way to receive right click mouse events on a Fabric.js canvas?

The following code works only with left click:

canvas.observe('mouse:down', function(){console.log('mouse down'));

回答1:

I've implemented right click by extending the fabric.Canvas class. Take a look here the _onMouseDown method.

Basically the right mouse down event for an object was disabled in fabricjs by default.

回答2:

The way I did this was to listen for a right click event across the entire canvas and match up the x,y coordinates of the click event to the object which is currently sitting at the given location. This solution feels a little like a hack but hey, it works!

$('#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
});

回答3:

If you want to handle right clicks (on canvas or its objects), then set context menu listener on upper-canvas element. Using canvas method findTarget you can check if any target was clicked and if so, you can check type of the target.

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

回答4:

NOTE: Most answers above are outdated; this answer applies to the latest Fabric version 2.7.0

Simply enable firing right/middle click events for your Fabric canvas

The config for firing right click and middle click events in the canvas can be found here for fireRightClick and here for fireMiddleClick and are set to false by default. This means right and middle click events are by default disabled.

You can enable these simply by setting the values when creating your canvas:

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

Now your mousedown event will fire for all clicks and you can distinguish them by using the button identifier on the event:

For canvas:

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

For objects:

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

To prevent the context menu from showing up or to prevent bubbling/propagation to other elements behind your canvas you can add:

if(event.button === 3){
    // event.e is the "real" DOM mouse event
    event.e.preventDefault();
    event.e.stopPropagation();
}

This will allow you to use right and/or middle click throughout your fabric app.

回答5:

Here's what I did, which makes use of some built-in fabric object detection code:

$('.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
        }
    });
});

来源：https://stackoverflow.com/questions/13108310/fabric-js-right-mouse-click

标签

javascript

canvas

fabricjs