Question

我试图使用jQuery context menu在html5画布中的特定元素画板上添加上下文菜单，但我不知道如何将其绑定到该画布。有什么提示吗？

Answer 1

无法引用html5 Canvas上绘制的形状

您在画布上绘制的任何特定形状/路径都不会被记住 - 形状只是画布上的像素。因此，您无法将上下文菜单绑定到不可引用的形状。

所以......你必须手动找到你的形状

作为起点，您需要在“像素之海”中找到您的形状。

寻找通告＆amp;数学的矩形形状

如果形状为矩形或圆形，您可以使用基本数学在数学上找到鼠标单击是否在形状内。

// test if the mouse is inside a circle
// Given the circle's centerpoint and its radius
var dx = mouseX-circleCenterX;
var dy = mouseY-circleCenterY;
var mouseIsInCircle = (dx*dx+dy*dy)<(circleRadius*circleRadius);

// test if the mouse is inside a rectangle
// Given the rectangle's x,y,width & height
var mouseIsInRect=(
    mouseX>=rect1.x &&
    mouseX<=rect1.x+rect1.width &&
    mouseY>=rect1.y &&
    mouseY<=rect1.y+rect1.height);

使用context.isPointInPath

查找更复杂的路径

在画布上引用路径的一种方法是将创建路径的命令放在对象中。当您需要命中测试该路径以查看是否应部署上下文菜单时，您可以重新定义路径并使用context.isPointInPath。之前的Stackoverflow Q&A显示了如何使用isPointInPath来测试鼠标是否位于复杂路径中。

使用Path2D的更好方法

Path2D内置于大多数现代浏览器（但不是IE）中，它允许您保存对复杂路径的引用。然后，您可以context.isPointInPath将该Path2D定义用于hit-test your Path2D。

上下文菜单本身

以前是Stackoverflow Q&A，它显示了如何创建自定义上下文菜单。

如果要使用jQuery上下文菜单，则需要动态创建按需菜单并配置菜单以在画布上的所需[x，y]处显示。 Some assembly is required

画布上的上下文菜单

1 个答案: