6

Fabric.js キャンバスで右クリック マウス イベントを受け取る方法はありますか?

次のコードは、左クリックでのみ機能します。

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

5 に答える 5

15

注: 上記のほとんどの回答は古くなっています。この回答は、最新の Fabric バージョン 2.7.0 に適用されます。

Fabricキャンバスの右/中クリックイベントの発生を有効にするだけです

キャンバスで右クリック イベントと中クリック イベントを発生させるための構成は、こことここで見つけることができ、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);
}
于 2019-04-10T13:42:43.197 に答える
4

fabric.Canvas クラスを拡張して右クリックを実装しました。メソッドはこちらをご覧ください。_onMouseDown

基本的に、fabricjs では、オブジェクトの右マウス ダウン イベントがデフォルトで無効になっています。

于 2014-10-03T05:09:13.727 に答える
3

私がこれを行った方法は、キャンバス全体で右クリックイベントをリッスンし、クリックイベントの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
});
于 2012-12-04T04:52:08.090 に答える
2

これは私が行ったことで、組み込みのファブリック オブジェクト検出コードを利用しています。

$('.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
        }
    });
});
于 2016-01-06T21:22:06.230 に答える