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

JavaScript right click context menus for different objects on a single canvas

本文关键字：右键 JavaScript 单击 上下文 菜单 对象 单个画      更新时间：2023-09-26

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

我在画布上画了一些二维物体：物体

  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右键单击上下文菜单找到了一个很酷的库。但它不符合我的要求。它需要绑定到某个html元素才能显示上下文菜单。在我的例子中，我只有一个元素，那就是画布，事件是根据对象和位置触发的。

您可以通过侦听画布上的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>

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

相关文章：