如何使用事件處理函數創建交互式HTML5畫布

Question

我想在畫布中創建一系列交互式區域。區域的數量是動態的，所以我不能硬編碼座標。

林加入地區像這樣的Click事件處理程序...

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