使用带有HTML 5 Canvas的JQuery创建上下文菜单 [英] Create context menu using JQuery with HTML 5 Canvas

问题描述

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

I try to develop HTML 5 Canvas has context menu. When click for every image in Canvas, it will show context menu for each image. At there, I has only one canvas

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

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

It will show all image when I draw. I try some jquery library context menu, It only support in case have more canvas (because it using class or id element for detect HTML element).

现在我只想使用1个画布，我在画布中检测到每个图像的点击，但我不知道如何创建上下文菜单。您可以建议我使用jquery库或者在我的情况下给我示例。

Now I want using only 1 canvas, I had been detected click for each image in canvas but I don't know how to create context menu. Can you suggest me using jquery library or give me example in my case.

谢谢。

推荐答案

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

• 通过在画布上侦听 contextmenu 事件来覆盖默认上下文菜单。

• Override the default context menu by listening for contextmenu events on the canvas.

canvas.addEventListener('contextmenu', handleContextMenu, false);  

在画布上绘制的特定图像内单击上下文鼠标按钮时，您可以重建带有针对所单击图像个性化的列表项的UL。

When the context mouse button is clicked inside a particular image drawn on your canvas you can rebuild the UL with list items individualized for the image that was clicked.

设置UL的位置：绝对，左， top 将上下文菜单放在画布上的鼠标位置上。

Set the UL's position:absolute, left, top to position your context menu over the mouse position on the canvas.

您可以在不需要时隐藏UL。

You can hide the UL when its not needed.

收听点击事件在UL的列表项上，以响应用户上下文菜单选择。

Listen for click events on the UL's list items to respond to a users context menu selection.

示例代码和演示：

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>

这篇关于使用带有HTML 5 Canvas的JQuery创建上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！