矩形的 kineticjs 上下文菜单

Question

var stage = new Kinetic.Stage({
    container: 'container',
    x: 10,
    y: 10,
    width: 800,
    height: 200,
});

var layer = new Kinetic.Layer();


var Igpk = new Kinetic.Rect({
    id:'igpk',
    x: 148,
    y: 32,
    width: 62,
    height: 118,
    fill: 'gold',
    stroke: 'black',
    strokeWidth: 2,
    opacity: 1,
    draggable: false
});

var Igpktext = new Kinetic.Text({
    x: 148 + 1,
    y: 32,
    text: 'iGPK',
    fontSize: 15,
    fontFamily: 'Calibri',
    fill: 'black',
    
});

var IgpkGroup = new Kinetic.Group({});

IgpkGroup.add(Igpk);
IgpkGroup.add(Igpktext);

var Requestone = new Kinetic.Rect({
    id: 'myRect',
    x: 219,
    y: 28,
    width: 116,
    height: 118,
    fill: '#87cefa',
    stroke: 'black',
    strokeWidth: 2,
    opacity: 1,
    draggable: false
});


var Requestonetext = new Kinetic.Text({
    x: 219 + 1,
    y: 28,
    text: 'Request One',
    fontSize: 15,
    fontFamily: 'Calibri',
    fill: 'black',
    
});

var RequestoneGroup = new Kinetic.Group({});

RequestoneGroup.add(Requestone);
RequestoneGroup.add(Requestonetext); 

RequestoneGroup.on('click', function() {
                
$.contextMenu({
    selector: '#container', 
        items: $.contextMenu.fromMenu($('#html5menu1'))

    });
    
    });

IgpkGroup.on('click', function() {
                
$.contextMenu({
    selector: '#container', 
        items: $.contextMenu.fromMenu($('#html5'))

    });
    
    });


layer.add(IgpkGroup);
layer.add(RequestoneGroup);
stage.add(layer);

css

.ui-menu {
            width: 300px;
            height: 500px;
         }

<link href="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.css" rel="stylesheet"/>

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.ui.position.js"></script>
<script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.js"></script>

<div id="container"></div>

 <menu id="html5menu1" type="context" class="showcase">
    <menuitem label="ajay" onclick="window.open('http://google.com','_newtab');"></menuitem>
    <menuitem label="vijay"></menuitem>
    </menu>

 <menu id="html5" type="context" class="show">
    <menuitem label="ajay 56" onclick="window.open('http://google.com','_newtab');"></menuitem>
    <menuitem label="vijay 1234"></menuitem>
    </menu>

此处是右键单击时显示矩形上下文菜单的代码。但这里的问题是每次当我单击上下文菜单被激活的矩形时。对于不同的矩形，我有不同的上下文菜单，但我在这里遇到了问题。请运行代码并查看输出。只有当我刷新页面然后单击时，上下文菜单才适用于不同的矩形。但是会再次显示该特定的上下文菜单。

Answer 1

因为我们要处理在同一个元素（#container）上显示多个上下文菜单，我们需要在创建另一个之前销毁上下文菜单。

$.contextMenu('destroy', '#container');

这并不能解决所有问题。正如您将看到的，上下文菜单的性质不允许它改变，除非先左键单击关闭它，然后再次右键单击另一个矩形。我认为这是因为上下文菜单的事件处理阻止了事件传播到 KineticJS 将捕获它的阶段。

可以做成点击白色舞台会破坏菜单，这样在舞台上右击就看不到具体的菜单了。这完全取决于您想要的行为，但重点是，您需要销毁菜单 :)

var stage = new Konva.Stage({
    container: 'container',
    x: 10,
    y: 10,
    width: 800,
    height: 200,
});

var layer = new Konva.Layer();


var Igpk = new Konva.Rect({
    id:'igpk',
    x: 148,
    y: 32,
    width: 62,
    height: 118,
    fill: 'gold',
    stroke: 'black',
    strokeWidth: 2,
    opacity: 1,
    draggable: false
});

var Igpktext = new Konva.Text({
    x: 148 + 1,
    y: 32,
    text: 'iGPK',
    fontSize: 15,
    fontFamily: 'Calibri',
    fill: 'black',
    
});

var IgpkGroup = new Konva.Group({});

IgpkGroup.add(Igpk);
IgpkGroup.add(Igpktext);

var Requestone = new Konva.Rect({
    id: 'myRect',
    x: 219,
    y: 28,
    width: 116,
    height: 118,
    fill: '#87cefa',
    stroke: 'black',
    strokeWidth: 2,
    opacity: 1,
    draggable: false
});


var Requestonetext = new Konva.Text({
    x: 219 + 1,
    y: 28,
    text: 'Request One',
    fontSize: 15,
    fontFamily: 'Calibri',
    fill: 'black',
    
});

var RequestoneGroup = new Konva.Group({});

RequestoneGroup.add(Requestone);
RequestoneGroup.add(Requestonetext); 

RequestoneGroup.on('click', function() {
    console.log("request");
    $.contextMenu('destroy', '#container');
    $.contextMenu({
        selector: '#container',
        items: {
            "RequestoneGroup": {
                name: "RequestoneGroup",
                icon: "edit"
            }
        }
    });
});

IgpkGroup.on('click', function() {
    console.log("IgpkGroup");
    $.contextMenu('destroy', '#container');
    $.contextMenu({
        selector: '#container',
        items: {
            "IgpkGroup": {
                name: "IgpkGroup",
                icon: "edit"
            }
        }
    });
});

layer.add(IgpkGroup);
layer.add(RequestoneGroup);
stage.add(layer);

css

.ui-menu {
            width: 300px;
            height: 500px;
         }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.ui.position.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.min.js"></script>

<div id="container" class="tester"></div>

 <menu id="html5menu1" type="context" class="showcase">
    <menuitem label="ajay" onclick="window.open('http://google.com','_newtab');"></menuitem>
    <menuitem label="vijay"></menuitem>
    </menu>

 <menu id="html5" type="context" class="show">
    <menuitem label="ajay 56" onclick="window.open('http://google.com','_newtab');"></menuitem>
    <menuitem label="vijay 1234"></menuitem>
    </menu>

Answer 2

只是几年后的跟进...也许 "click" 事件不是最适合上下文菜单的事件。为了获得与 Konva 形状一起按预期工作的上下文菜单（即右键单击，绑定到形状，无残留），我在容器上使用了一个上下文菜单事件，然后确定了尖锐的形状，最后为该形状创建了一个专用的上下文菜单, 具有自动隐藏和重新定位属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.ui.position.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.min.js"></script>

<div id="container" class="tester"></div>

<script>
    var stage = new Konva.Stage({
        container: 'container',
        x: 10,
        y: 10,
        width: 800,
        height: 200
    });

    var layer = new Konva.Layer();


    var Igpk = new Konva.Rect({
        id:'igpk',
        x: 148,
        y: 32,
        width: 62,
        height: 118,
        fill: 'gold',
        stroke: 'black',
        strokeWidth: 2,
        opacity: 1,
        draggable: false
    });

    var Igpktext = new Konva.Text({
        x: 148 + 1,
        y: 32,
        text: 'iGPK',
        fontSize: 15,
        fontFamily: 'Calibri',
        fill: 'black'

    });

    var IgpkGroup = new Konva.Group({});

    IgpkGroup.add(Igpk);
    IgpkGroup.add(Igpktext);

    var Requestone = new Konva.Rect({
        id: 'myRect',
        x: 219,
        y: 28,
        width: 116,
        height: 118,
        fill: '#87cefa',
        stroke: 'black',
        strokeWidth: 2,
        opacity: 1,
        draggable: false
    });


    var Requestonetext = new Konva.Text({
        x: 219 + 1,
        y: 28,
        text: 'Request One',
        fontSize: 15,
        fontFamily: 'Calibri',
        fill: 'black'

    });

    var RequestoneGroup = new Konva.Group({draggable:true});

    RequestoneGroup.add(Requestone);
    RequestoneGroup.add(Requestonetext);


    document.querySelector('#container').addEventListener('contextmenu', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var pos = stage.getPointerPosition();
        var shape = layer.getIntersection(pos,'Group');
        // clear all menus, if any
        $.contextMenu('destroy');
        if (shape === IgpkGroup) {
            $.contextMenu({
                selector: '#container',
                autoHide: true,
                reposition: false,
                items: {
                    "IgpkGroup": {
                        name: "IgpkGroup",icon: "edit"},
                    "edit": {name: "Edit", icon: "edit"},
                    "cut": {name: "Cut", icon: "cut"},
                    copy: {name: "Copy", icon: "copy"},
                    "paste": {name: "Paste", icon: "paste"},
                    "delete": {name: "Delete", icon: "delete"},
                    "sep1": "---------",
                    "quit": {name: "Quit", icon: function(){
                            return 'context-menu-icon context-menu-icon-quit';
                        }}
                }
            });
            $('#container').contextMenu({x:pos.x,y:pos.y});
        }
        else if (shape === RequestoneGroup) {
            $.contextMenu({
                selector: '#container',
                autoHide: true,
                reposition: false,
                items: {
                    "RequestoneGroup": {
                        name: "RequestoneGroup",
                        icon: "edit"
                    }
                }
            });
            $('#container').contextMenu({x:pos.x,y:pos.y});

        }
    });

    layer.add(IgpkGroup);
    layer.add(RequestoneGroup);
    stage.add(layer);
</script>
</body>
</html>

矩形的 kineticjs 上下文菜单

kineticjs contextmenu for a rectangle

html

jquery-ui

kineticjs