画布上图像的像素准确命中检测？

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