javascript - 在 Canvas 点上添加监听器

Question

嘿，我在 Canvas 上有一个简单的三 Angular 形，我想为每个三 Angular 形的点添加监听器，这样如果用户单击每个点就会发生一个操作。我想知道这样的程序在 Canvas 上是否可行，如果不是我的替代方案是什么？所以我的主要问题如下:

1. 我可以在 Canvas 单点上添加监听器吗？如果不是，我的选择是什么？

更新:

我尝试过运气，成功在所有 Canvas 上添加点击事件，然后获取当前的鼠标点击点，但我的解决方案不是最终的，也很不珍贵。

我可以在每个点击点周围创建一个区域，这样用户就不必在点击中浪费时间吗？

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

Canvas 中没有可以附加事件的单点 - 它只是一个绘图 Api - 图像的容器(请参阅 W3School 以获取更多引用)。

但是如果你有坐标，当然你总是可以检测到 Canvas 中的点击位置。

我给你做了一个fiddle ，展示可能的解决方案。

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