Dessiner des éléments polygonaux et les rendre cliquables

Question

Je veux créer un panneau de téléphone avec des boutons cliquables. (HTML5, pas besoin de prendre en charge les anciens navigateurs)
Par exemple. le meilleur téléphone mobile qui a jamais été:

Les boutons de ce téléphone doit être cliquable et ont une fonction Javascript assignée. Supposons que l'entrée est le panelImage et un tableau de boutons, chaque bouton contenant un tableau de sommets (x, y pour chaque)

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

Quelle est la meilleure façon de mettre en œuvre ce?
La seule façon dont je sais comment dessiner ceci sur une toile puis, en utilisant un algorithme mathématique, déterminer quel bouton a été cliqué.
S'il y a un meilleur moyen, celui qui identifiera click en utilisant des événements de navigateur, je préférerais cela.

Cela devrait fonctionner sur les navigateurs modernes (IE9 +)

Answer 1

A Démo: http://jsfiddle.net/m1erickson/fLyrz/

Canvas fournit une méthode utile pour détecter si un [x, y] est à l'intérieur d'un chemin (polygone est un chemin).

context.isPointInPath(mouseX,mouseY); 

Alors bouton # 1 dans votre image peut être définie dans un objet comme celui-ci:

var buttons=[]; 

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

Vous pouvez obtenir les points de chemin d'une application d'image (par exemple, MS Paint, etc.).

Ensuite, vous pouvez écouter mousedown et tester si le bouton # 1 a été pressé:

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

Note:context.isPointInPath essais que le dernier chemin tracé. C'est pourquoi la fonction mouseIsInButton redessine le chemin du bouton n ° 1 avant de tester si elle a été atteinte en utilisant context.isPointInPath.