Question

嘿我在画布上有一个简单的三角形，我想在每个三角形的点上添加监听器，这样如果用户点击每个点就会发生一个动作。我想知道这样的程序是否可以在画布上，如果不是我的替代品？所以我的主要问题如下：

我可以在画布上单点添加一个监听器吗？如果不是我的替代品？

更新

我已经尝试过我的运气并成功在所有画布上添加点击事件，然后获得当前鼠标点击点，但我的解决方案不是最终的，而且非常不珍贵。

我是否可以在点击的每个点周围创建一个区域，以便用户不必在点击中获得宝贵的效果？

$(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 - 图像的容器（参见W3School以供进一步参考）。

但是如果你有坐标，你当然可以随时检测画布中的点击位置。

我给你一个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!');
    }
  }
}

在画布上添加侦听器

1 个答案: