我尝试开发HTML 5 Canvas有上下文菜单。单击“画布”中的每个图像时,它将显示每个图像的上下文菜单。在那里,我只有一个画布
<canvas id="canvas" width=300 height=300></canvas>
绘制时会显示所有图像。我尝试了一些jquery库上下文菜单,它只支持以备有更多画布(因为它使用class
或id
元素来检测HTML元素)。
现在我只想使用1个画布,我在画布中检测到每个图像的点击,但我不知道如何创建上下文菜单。您能否建议我使用jquery库或在我的案例中给我举例。
感谢。
答案 0 :(得分:8)
一个想法是使用无序列表创建自己的自定义上下文菜单。
通过在画布上侦听contextmenu
事件来覆盖默认上下文菜单。
canvas.addEventListener('contextmenu', handleContextMenu, false);
在画布上绘制的特定图像内单击上下文鼠标按钮时,您可以使用针对所单击图像个性化的列表项重建UL。
设置UL position:absolute
,left
,top
,将上下文菜单放在画布上的鼠标位置上。
您可以在不需要时隐藏UL。
收听UL列表项目上的点击事件,以响应用户上下文菜单选择。
示例代码和演示:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var $menu=$('#contextMenu');
var rects=[];
rects.push({x:50,y:50,width:50,height:50,color:"red",contextMenu:['One red','Two red']});
rects.push({x:150,y:100,width:75,height:75,color:"blue",contextMenu:['One blue','Two blue']});
ctx.clearRect(0,0,cw,ch);
for(var i=0;i<rects.length;i++){
var rect=rects[i];
ctx.beginPath();
ctx.fillStyle=rect.color;
ctx.rect(rect.x,rect.y,rect.width,rect.height);
ctx.fill();
}
$('#contextMenu').on('click','li',function(e){
// hide the context menu
showContextMenu();
alert('Context selection: '+$(this).text());
});
// hide the context menu
showContextMenu();
canvas.addEventListener('mousedown', handleMouseDown, false);
canvas.addEventListener('contextmenu', handleContextMenu, false);
function handleMouseDown(e){
// hide the context menu
showContextMenu();
}
function handleContextMenu(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// get mouse position relative to the canvas
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
// hide the context menu
showContextMenu();
// check each rect for hits
for(var i=0;i<rects.length;i++){
var rect=rects[i];
var rectRight=rect.x+rect.width;
var rectBottom=rect.y+rect.height;
// check each rect for hits
if(x>=rect.x && x<=rectRight && y>=rect.y && y<=rectBottom ){
showContextMenu(rect,x,y);
}
}
return(false);
}
function showContextMenu(r,x,y){
if(!r){$menu.hide(); return;}
$menu.show();
var m=r.contextMenu;
$menu.empty();
$menu.css({left:x,top:y});
for(var i=0;i<m.length;i++){
$('<li>', { text:m[i], 'data-fn':i, }).appendTo($menu[0]);
}
}
&#13;
body{ background-color: ivory; padding:0; }
#canvas{border:1px solid red;}
#canvasContainer{position:relative;}
#canvas,#contextMenu{position:absolute;}
#contextMenu{
border:1px solid green;
background:white;
list-style:none;
padding:3px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Right click on rect for context menu.</h4>
<div id=canvasContainer>
<canvas id="canvas" width=300 height=300></canvas>
<ul id=contextMenu><li>Test</li></ul>
</div>
&#13;