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

Question

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

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

它会在我绘制时显示所有图像.我尝试了一些jquery库上下文菜单,它只支持以备有更多canvas(因为它使用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>