Точность обнаружения пикселей на изображениях на холсте?

Question

У меня есть базовая изометрическая карта с несколькими спрайтами, загруженными на карту в HTML-холсте.

Мне интересно, можно ли щелкнуть на холсте с точностью до пикселя, и JS определит, что вы нажали на холсте?

Если так, то есть ли способ сделать это без библиотеки?

Answer 1

Canvas API имеет метод isPointInPath (x, y) , который позволяет определить, находится ли точка (x, y) внутри текущего пути (или на нем).

Теперь, если у вас уже есть много фигур на холсте и вы хотите знать, какая из них была нажата, и не хотите использовать библиотеку, вам придется вести список или карту объектов, представляющих эти фигуры, и иметь * 1005. * обработчик событий, который проходит через него и выполняет некоторые вычисления.

Такой список может выглядеть как

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.

Например, использование Crafty's содержит Point (x, y) метод:

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