使用带有 HTML 5 Canvas 的 JQuery 创建上下文菜单

Question

我尝试开发具有上下文菜单的 HTML 5 Canvas。单击画布中的每个图像时，它将显示每个图像的上下文菜单。在那里，我只有一张画布

<canvas id="canvas" width=300 height=300></canvas>

当我绘制时它会显示所有图像。我尝试了一些 jquery 库上下文菜单，它只支持在有更多画布的情况下（因为它使用class 或id 元素来检测 HTML 元素）。

现在我只想使用 1 个画布，我已检测到画布中每个图像的点击，但我不知道如何创建上下文菜单。你能建议我使用 jquery 库还是给我一个例子。

谢谢。

Answer 1

一个想法是使用无序列表创建您自己的自定义上下文菜单。

• 通过侦听画布上的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]);
  }
}

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>