@Dimazsever

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

В html есть различные события мыши, когда взаимодействуешь с элементами на странице. К сожалению на canvas такое не реализовано. Есть различные библиотеки, но мне хотелось бы обойтись без них.
Как реализовать такую проверку? Допустим я делаю игру пазлы. Как мне проверять над каким квадратом в данный момент времени находится курсор, чтобы сделать подсветку к примеру? Нужно решение без использования библиотек. В поиске пробивал, но находит совсем не то. Подскажите в какую сторону копать?
  • Вопрос задан
  • 662 просмотра
Решения вопроса 1
@iShatokhin
JS developer
Когда я делал нечто похожее (но с интерактивными картами), я слушал событие на самом холсте. Брал из события координаты (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 на обработчик, чтобы снизить нагрузку.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
Массив с координатами объектов (верхняя правая и нижняя левая точки) перебирать
Ответ написан
Keyten
@Keyten
Заюзайте isPointInPath вместе с получением координат мыши.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы