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>

에 대한의 ContextMenu. 하지만 여기서 문제는 컨텍스트 메뉴가 활성화 된 사각형을 클릭 할 때마다입니다. 다른 직사각형에 대해 다른 상황에 맞는 메뉴가 있지만 여기에 문제가 있습니다. 친절하게 코드를 실행하고 결과를 확인하십시오. 컨텍스트 메뉴는 페이지를 새로 고친 다음을 클릭 할 때만 다른 사각형에 대해 작동합니다. 그러나 다시 특정 컨텍스트 메뉴가 표시됩니다.

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>