Как сделать проверку наведения курсора на игровой объект на canvas?

Question

[Dimazsever]

В html есть различные события мыши, когда взаимодействуешь с элементами на странице. К сожалению на canvas такое не реализовано. Есть различные библиотеки, но мне хотелось бы обойтись без них.
Как реализовать такую проверку? Допустим я делаю игру пазлы. Как мне проверять над каким квадратом в данный момент времени находится курсор, чтобы сделать подсветку к примеру? Нужно решение без использования библиотек. В поиске пробивал, но находит совсем не то. Подскажите в какую сторону копать?

Comments

[Евгений Петров]

«Игровой» объект — просто часть картинки. Только перебирать координаты.

Answer 1

[Илья Шатохин]

Когда я делал нечто похожее (но с интерактивными картами), я слушал событие на самом холсте. Брал из события координаты (event.pageX и event.pageY) и по ним искал вхождение в нужный мне элемент на холсте (я хранил координаты элементов в памяти). Вот код моей функции:

$("#myCanvas").on("click", function(event){
		var pt = [event.pageX, event.pageY];
		var elem = findP(pt);
});

function findP (pt) { // polygons это массив элементов (объекты с данными и координатами), в которых хранятся координаты вершин многоугольников (points).
		for (var z = 0; z < polygons.length; z++) { 			var polyz = polygons[z].points;
			for(var c = false, i = -1, l = polyz.length, j = l - 1; ++i < l; j = i)
				((polyz[i][1] <= pt[1] && pt[1] < polyz[j][1]) || (polyz[j][1] <= pt[1] && pt[1] < polyz[i][1]))
				&& (pt[0] < (polyz[j][0] - polyz[i][0]) * (pt[1] - polyz[i][1]) / (polyz[j][1] - polyz[i][1]) + polyz[i][0])
				&& (c = !c);
			if (c) return polygons[z].properties;
		} return null;
	}

Можно смело заменить событие click на hover/mouseover, код будет такой же. Только стоит добавить debounce или throttling на обработчик, чтобы снизить нагрузку.

Comments

[Dimazsever]

спасибо

Answer 2

[Антон Шаманов]

Массив с координатами объектов (верхняя правая и нижняя левая точки) перебирать

Comments

[Илья Шатохин]

верхняя правая и нижняя левая точки

Для сложных элементов это плохая идея (у топикстартера пазлы). Нужно хранить или формулу кривой, или вершины всех координат.

[Dimazsever]

спасибо за ответ

[Антон Шаманов]

Илья Шатохин: ну я привел самый простой вариант, все зависит конечно от конкретной задачи (вида элементов)

[Dimazsever]

Илья Шатохин: пазлы квадратные

[Илья Шатохин]

Dimazsever: Тогда мой код вхождения точки избыточен, можете действительно искать по двум точкам, как предложил Антон Шаманов

[Dimazsever]

Илья Шатохин: ок. спасиб все равно

Answer 3

[Keyten]

Заюзайте isPointInPath вместе с получением координат мыши.