JavaScript 右键单击​​单个画布上不同对象的上下文菜单

Question

我正在寻找上下文菜单库。

我在画布上绘制了一些 2d 对象：objects

  ctx.save();
  ctx.fillStyle = "#00ff00";
  ctx.fillRect(30, 30, 20, 20);
  ctx.stroke();
  ctx.restore();

  ctx.save();
  ctx.fillStyle = "#ff0000";
  ctx.fillRect(0, 0, 20, 20);
  ctx.stroke();
  ctx.restore();

我需要为控件添加右键上下文菜单。

例如：

如果我右键单击红色矩形，它将显示一个菜单：显示红色，或移动它。 如果我右键单击绿色矩形，它会显示另一个矩形。
而且所有的对象都是可移动的，所以如果红色矩形移动到不同的地方，当我右键单击这个对象时，它应该会显示相同的上下文菜单。

画布上不同的可移动对象显示不同的上下文菜单。

是否存在此类函数的一些库？
如果没有，我该如何尝试编写代码？

我为jquery right click context menu 找到了一个很酷的库。 但这不符合我的要求。它需要绑定到某个 html 元素以显示上下文菜单。就我而言，我只有一个元素是画布，并且根据对象和位置触发事件。

Answer 1

您可以通过侦听画布上的contextmenu 事件来处理右键单击：

// listen for contextmenu requests
canvas.addEventListener('contextmenu', handleMouseDown, false);  

这是一个针对 2 个不同的画布矩形发出不同警报的示例：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var rects=[];

rects.push({x:50,y:50,width:50,height:50,color:"red"});
rects.push({x:150,y:100,width:75,height:75,color:"blue"});

ctx.clearRect(0,0,canvas.width,canvas.height);
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();
}

// listen for contextmenu requests
canvas.addEventListener('contextmenu', handleMouseDown, false);  

function handleMouseDown(e){

  // get mouse position relative to the canvas
  var x=parseInt(e.clientX-offsetX);
  var y=parseInt(e.clientY-offsetY);


  // 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  ){
      alert("Context menu request on the "+rect.color+" rectangle.");
    }
  }

  // prevents the usual context from popping up
  e.preventDefault()
  return(false); 
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Right click in either rectangle.</h4>
<canvas id="canvas" width=300 height=300></canvas>

Answer 2

参考这个。希望这会有用。 http://hacksaw.mmto.arizona.edu/src/RGraph_2010-03-27-stable/RGraph/docs/context.html