javascript - 绘制多边形元素并使其可点击

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

实现这一点的最佳方法是什么？
我知道的唯一方法是在 Canvas 上绘制它，然后使用一些数学算法找出单击了哪个按钮。
如果有更好的方法，即使用浏览器事件识别点击，我会更喜欢。

这应该适用于现代浏览器(IE9+)

Answer 1

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

Canvas 提供了一种有用的方法来检测 [x,y] 是否在路径内(您的多边形是路径)。

context.isPointInPath(mouseX,mouseY);

因此图像中的button#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 并测试是否按下了 button#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 函数会在使用 context.isPointInPath 测试按钮#1 是否被击中之前重新绘制按钮#1 的路径。