在畫布上添加偵聽器

Question

嘿，我在畫布上有一個簡單的三角形，我想在每個三角形的點上添加偵聽器，這樣，如果用戶單擊每個點，就會發生動作。 我想知道是否可以在畫布上執行此步驟，如果沒有，我的替代方法是什么？ 所以我的主要問題如下：

1. 我可以在畫布單點上添加偵聽器嗎？ 如果不是，我有什么選擇？

更新：

我已經嘗試過運氣，並成功在所有畫布上添加了click事件，然后獲得了鼠標單擊的當前點，但是我的解決方案不是最終的，也不是很寶貴。

我是否可以在每個單擊的點周圍創建一個區域，以使用戶不必在點擊中變得珍貴？

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

您無法在畫布上附加一個事件，它只是一個繪圖Api，它是Image的容器（有關更多信息，請參見W3School ）。

但是，如果您有坐標，則當然可以始終檢測“畫布”中的單擊位置。

我給你弄了個小提琴 ，以顯示可能的解決方案。

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

更新：

如果要創建公差，則必須定義要接受的實際位置的正負。 以下是一種簡單而不優雅的方法：

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

現在，您可以將doMouseDown函數更改為如下所示：

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