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个不同的画布矩形进行不同警告的示例：

＆＃13;

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); 
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

2 个答案: