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

Question

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

我正在像这样将区域添加到单击事件处理程序...

$('#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);
        }
    }
});

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

How to create an interactive HTML5 Canvas using event handlers

html

canvas