我尝试开发具有上下文菜单的 HTML 5 Canvas。当单击 Canvas 中的每个图像时,它将显示每个图像的上下文菜单。在那里,我只有一张 Canvas
<canvas id="canvas" width=300 height=300></canvas>
它会在我绘制时显示所有图像。我尝试了一些 jquery 库上下文菜单,它仅在有更多 Canvas 的情况下支持(因为它使用 class
或 id
元素来检测 HTML 元素)。
现在我只想使用 1 个 Canvas ,检测到我对 Canvas 中的每个图像都进行了点击,但我不知道如何创建上下文菜单。你能建议我使用 jquery 库或给我举个例子吗?
谢谢。
最佳答案
一个想法是使用无序列表创建您自己的自定义上下文菜单。
通过监听 Canvas 上的
contextmenu
事件来覆盖默认的上下文菜单。canvas.addEventListener('contextmenu', handleContextMenu, false);
当在 Canvas 上绘制的特定图像中单击上下文鼠标按钮时,您可以使用针对所单击图像的个性化列表项重建 UL。
设置 UL 的
position:absolute
、left
、top
以将上下文菜单定位在 Canvas 上的鼠标位置上。您可以在不需要时隐藏 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]);
}
}
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;
}
<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>
关于jquery - 使用 JQuery 和 HTML 5 Canvas 创建上下文菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31601393/