Hinzufügen von Listener auf Canvas-Punkten

Question

Hey Ich habe ein einfaches Dreieck in Canvas, und ich möchte jedem Punkt des Dreiecks Listener hinzufügen, so dass wenn Benutzer auf jeden Punkt klicken eine Aktion passieren wird. Ich würde gerne wissen, ob eine solche Vorgehensweise in Leinwand möglich ist, wenn nicht, was meine Alternativen? so ist meine Hauptfrage wie folgt:

1. Kann ich einen Listener auf Leinwand einzelne Punkte hinzufügen? Wenn nicht, was sind meine Alternativen?

Update:

ich mein Glück versucht haben und erfolgreich zu sein Click-Ereignis auf der ganzen Leinwand in das Hinzufügen und dann aktuellen Punkte per Mausklick erhalten, aber meine Lösung ist nicht endgültig und nicht sehr wertvoll.

Kann ich einen Bereich um jeden Punkt erstellen, auf den geklickt wird, damit der Benutzer nicht auf seine Klicks Wert legen muss?

http://codepen.io/Barak/pen/VadQYm

$(function(){ 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var triangle = [{ x: 58, y: 845 }, { x: 984, y: 845 }, { x: 521, y: 41 }]; 
 
    drawTriangle(triangle); 
 
    function drawTriangle(t) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(t[0].x, t[0].y); 
 
    ctx.lineTo(t[1].x, t[1].y); 
 
    ctx.lineTo(t[2].x, t[2].y); 
 
    ctx.closePath(); 
 
    ctx.strokeStyle = 'black'; 
 
    ctx.lineWidth = 2; 
 
    ctx.stroke(); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="canvas-wrapper"> 
 
     <canvas id="canvas" width=1024 height=980></canvas> 
 
    </div>

Answer 1

Es gibt keinen einzigen Punkt, den Sie ein Ereignis in der Leinwand anbringen könnte - es ist nur eine Zeichnung Api - ein Behälter für Bild (siehe W3School für weitere Referenz).

Aber wenn Sie die Koordinaten haben, können Sie natürlich immer die angeklickte Position in Ihrem Canvas erkennen.

Ich machte Sie eine fiddle, um die mögliche Lösung zu zeigen.

canvas.addEventListener("mousedown", doMouseDown, false); 
function doMouseDown(e) { 
for (i = 0; i < triangle.length; ++i) { 
    if ((e.x triangle[i].x) && (e.y === triangle[i].y)) { 
    console.log('you hit an edge!'); 
    } 
} 
} 

Update:

Wenn Sie eine Toleranz erstellen möchten, haben Sie die Plus- und die Minus der aktuellen Position, die Sie annehmen möchten definieren. Eine einfache und nicht elegante Weise könnte die folgende sein:

function tolerance(number){ 
//define the tolerance here 
var tolerance = 15; 
//all the accepted numbers within the tolerance will be in this array 
var numberArray=[]; 

for(i=0;i<(tolerance)*2;++i){ 
    if(i >= tolerance){ 
     if(i!=tolerance){ 
      numberArray[i] = numberArray[i-1]-1; 
     }else{ 
      numberArray[i] = number -1; 
     } 
    }else{ 
     if(i!=0){ 
      numberArray[i] = numberArray[i-1]+1; 
     }else{ 
      numberArray[i] = number +1; 
     } 
    } 
} 
//don't forget to put the actual number in the array 
numberArray.push(number); 
return numberArray; 
} 

Sie können nun die DoMouseDown Funktion ändern etwas wie folgt aussehen:

function doMouseDown(e) { 
for (k = 0; k < triangle.length; ++k) { 
    if ((tolerance(triangle[k].x).indexOf(e.x)!=-1) && (tolerance(triangle[k].y).indexOf(e.y)!=-1)) { 
     console.log('you hit an edge!'); 
    } 
    } 
}