Как реализовать ромбовидную стратегическу карту в Canvas, с сохранением выбора квадратов при наведении?

Question

[dpablo_escobarr]

Не понимаю как сделать так, чтобы после преобразования контекста canvas'a функциями rotate(); translate();
координаты у каждого наложенного квадрата картинкой через drawImage()
смещаются, и поймать координаты относительно самого Canvas, уже не получается. Выходит так что у курсора при наведении на Canvas одни координаты а у смещенных квадратов другие.

Как можно реализовать данную задумку. Есть вариант через ромбовидные png картинки, но после добавления из функцией drawImage()

они всеравно получаются квадратными, и на холсте при наведении курсора на такую картинку, событие срабатывает не корректно.

хочу получить из такого (все работает корректно)



вот такое


здесь применены

ctx.rotate(45 * Math.PI / 180);
      ctx.translate(200, -250);

и соответственно координаты при наведении на квадрат тайла, выделяется не тот. Спасибо!

Answer 1

[Александр]

То, что Вы ищите называется изометрией. Посмотрите примеры: 1, 2. Проверять, в каком тайле Вы находитесь можно при помощи isPointInPath (а сами тайлы создавать через Path2D).