kineticjs 다음은 마우스 오른쪽 버튼을 클릭하면 구형의 상황에 맞는 메뉴를 표시하는 코드입니다 사각형
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. 하지만 여기서 문제는 컨텍스트 메뉴가 활성화 된 사각형을 클릭 할 때마다입니다. 다른 직사각형에 대해 다른 상황에 맞는 메뉴가 있지만 여기에 문제가 있습니다. 친절하게 코드를 실행하고 결과를 확인하십시오. 컨텍스트 메뉴는 페이지를 새로 고친 다음을 클릭 할 때만 다른 사각형에 대해 작동합니다. 그러나 다시 특정 컨텍스트 메뉴가 표시됩니다.
을 파괴해야합니다. 도와 줘서 고마워. 사실, 컨텍스트 메뉴를 파괴하는 걸 생각하지 않았어. – Rickey
코드의 모든 참조가 작동하지 않아 업데이트하십시오. –
수정. 또한 Kinetic에서 Konva로 전환되었습니다. –