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

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

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

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

例如：

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

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

是否存在用于此类型函数的库？ 如果没有，我如何尝试编写一个

我为你找到了一个很酷的图书馆。

---

但它不符合我的要求。它需要绑定到某个html元素以显示上下文菜单。在我的例子中，只有一个元素是画布，事件根据对象和位置触发。

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

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

下面是一个示例，它针对两个不同的画布矩形发出不同的警报： var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var canvasOffset=$canvas.offset； var offsetX=canvasOffset.left； var offsetY=canvasOffset.top； var rects=[]； 矩形推{x:50，y:50，宽度：50，高度：50，颜色：红色}； 矩形推送{x:150，y:100，宽度：75，高度：75，颜色：蓝色}； ctx.clearRect0,0，canvas.width，canvas.height；

---

forvar i=0；我参考这个。希望这将是有用的。

---

谢谢，那么功能操作的所有上下文菜单都应该绑定到一个handleMouseDown？如何添加不同类型的菜单？是的，所有上下文菜单请求都是通过侦听“contextmenu”事件来处理的，这是因为画布上只有1个元素触发事件。在这1个处理程序中，您点击test（测试）每个矩形并相应地做出响应。至于不同类型的菜单，这取决于您和您的设计要求。祝你的项目好运！什么是offsetX和offsetY？@AustinCapobianco偏移是画布离开浏览器左上角的宽度和高度。这些偏移是正确计算鼠标相对于画布的位置而不是相对于浏览器窗口的默认位置所必需的。干杯

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