绘制多边形元素并使其可单击

Question

我想制作一个带可点击按钮的手机面板。 （HTML5，无需支持旧浏览器）
例如。有史以来最好的手机：

此手机的按钮应该是可点击的，并且分配了Javascript功能。 让我们假设输入是panelImage和一个按钮数组，每个按钮包含一个顶点数组（每个按钮x，y）

{
    "panelImage": [],
    "buttons": [
        {
            "action": "Menu",
            "vertices": [ {"x": 3, "y": 2}, {"x": 3, "y": 7}, {"x":6, "y":7}, {"x": 6, "y":2} ]
        }
    ]
}

实施此方法的最佳方法是什么？ 我知道如何在画布上绘制它的唯一方法是使用一些数学算法确定单击了哪个按钮。
如果有一种更好的方法，那就是使用浏览器事件识别click，我宁愿这样做。

这适用于现代浏览器（IE9 +）

Answer 1

演示：http://jsfiddle.net/m1erickson/fLyrz/

Canvas提供了一种有用的方法来检测[x，y]是否在路径中（您的多边形是路径）。

context.isPointInPath(mouseX,mouseY);

因此，您的图片中的按钮＃1可以在以下对象中定义：

var buttons=[];

buttons.push({
    id:1,
    points:[{x:24,y:270},{x:57,y:272},{x:57,y:289},{x:24,y:285}
]});

您可以从图像应用程序中获取路径点（例如MS Paint等）。

然后你可以听mousedown并测试是否按下按钮＃1：

function handleMouseDown(e){
  e.preventDefault();
  e.stopPropagation();

  var mouseX=parseInt(e.clientX-offsetX);
  var mouseY=parseInt(e.clientY-offsetY);

  for(var i=0;i<buttons.length;i++){
      if(mouseIsInButton(buttons[i],mouseX,mouseY)){
          alert("You pressed "+buttons[i].id);
      }
  }
}

function mouseIsInButton(button,x,y){
    var points=button.points;
    ctx.beginPath();
    ctx.moveTo(points[0].x,points[0].y);
    for(var i=1;i<points.length;i++){
        var pt=points[i];
        ctx.lineTo(pt.x,pt.y);
    }
    ctx.closePath();
    return(ctx.isPointInPath(x,y));
}

注意： context.isPointInPath仅测试最后绘制的路径。这就是为什么mouseIsInButton函数在测试之前会重新绘制按钮＃1的路径，如果它是使用context.isPointInPath命中的。