如何使用事件处理程序创建交互式HTML5 Canvas

Question

我想在画布中创建一系列交互区域。区域的数量是动态的，所以我不能硬编码坐标。

我将区域添加到像这样的点击事件处理程序......

$('#FootprintCV').click(function (e) {
    var clickedX = e.pageX - this.offsetLeft;
    var clickedY = e.pageY - this.offsetTop;

    if (clickedX < area1.right && clickedX > area1.left && clickedY > area1.top && clickedY < area1.bottom) {
             console.log('Area1 clicked at X: ' + clickedX + " Y:" + clickedY);
        }
    }
});

Answer 1

我建议您将对象添加到数组中，并在发生单击时迭代数组...

创建一个包含区域坐标的数组和对象

var clickShapes = [];
clickShapes.push(shapeObject1);
clickShapes.push(shapeObject2);
clickShapes.push(shapeObject3);

当拾取点击时，迭代数组以捕获事件。

$('#FootprintCV').click(function (e) {
   var clickedX = e.pageX - this.offsetLeft;
   var clickedY = e.pageY - this.offsetTop;
   var i = clickShapes.length;
   while (i-- && i >= 0) {
        if (clickedX < clickShapes[i].right && clickedX > clickShapes[i].left && clickedY > clickShapes[i].top && clickedY < clickShapes[i].bottom) {
             console.log('Circle nr ' + i + ' clicked at X: ' + clickedX + " Y:" + clickedY);
        }
    }
});