畫布上圖像的像素準確命中檢測？

Question

我有一個基本的等軸測圖，一些精靈在html畫布中加載到地圖上。

我想知道，是否有可能點擊畫布，像素準確的水平，並讓JS找出你在畫布上點擊了什麼？

如果有，還有一種方法可以在沒有圖書館的情況下完成嗎？

Answer 1

Canvas API有isPointInPath(x, y)方法，它允許您確定點（x，y）是否在當前路徑（或其上）內。

現在，如果您的畫布上已經有很多形狀，並且想知道哪個被點擊過，並且不想使用庫，那麼您將不得不維護代表這些形狀的對象的列表或地圖，並且有一個onclick事件處理程序遍歷它並執行一些計算。

這樣一份名單，可能看起來像

var shapeList = [ 
    {shape: "rect", x0: 100, y0: 100, x1: 200, y1: 150}, 
    {shape: "circle", x0: 400, y0: 400, r: 50}, 
    ... 
]; 

幸運的是，有圖書館，有可以爲你做這項工作。您可以檢查例如crafty.js或lime.js。這些是Canvas遊戲開發的有用庫。

對於爲例，使用狡猾的containsPoint(x, y)方法：

var circle = new Crafty.circle(0, 0, 10); 
console.log(circle.containsPoint(0, 0)); // true 
console.log(circle.containsPoint(50, 50)); // false