Как картинку канвасом разбить по частям и каждая часть была кликабельна?

Question

[danilr]

Есть такая картинка, как сделать кликабельной и навешать на неё метод на каждую планировку? Нужно чтобы был какой-то эффект при наведении/клике на эту область (например рамка подсвечивалась).
Подскажите, с канвасом ранее не работал, не понимаю как это делается. На примере одной планировки(например, верхней левой желтой) покажите, пожалуйста.

Comments

[RAX7]

Проще будет сделать это в SVG
https://habr.com/ru/post/127994/
https://codepen.io/thomasjwicker/pen/cibur

[danilr]

RAX7, и мне все вот эти мелочи(подписи, линии, штрихи и цифры, ванные команты) надо будет в СВГ рисовать?

[RAX7]

danilr, а оно сейчас в чем нарисовано, CAD какой-нибудь? Если да, то можно экспортировать оттуда например в eps и конветировать в svg.

[danilr]

RAX7, в JPEG)

Answer 1

[Athanor]

На самом деле, возможно получится обойтись и без canvas, например так

А вот инструмент для удобного построения такой карты

Comments

[danilr]

Нужно чтобы пользователь понимал что наводит на какую-то планировку, чтобы она подсвечивалась или рамка появлялась, к примеру.

[Athanor]

danilr, тогда, наверное, придется canvas использовать. Будет что-то в таком стиле.

[Athanor]

обратите внимание, что предложенное решение будет работать только для тэгов area с атрибутом shape="poly", для других типов потребуется доработка. Ну и само собой, рамки придется выровнять.

[danilr]

Athanor, решение в этом направлении мне очень нравится) правда пока не понял как это всё работает) А как управлять рамкой? мне надо ее сделать шире и сделать ей размытие какое-нибудь.

[Athanor]

danilr, рамка рисуется согласно координатам, которые указываются атрибутом к тегам area. Т.е. при наведении на area мы достаем ее координаты, парсим и отображаем на канвасе. За это отвечает функция drawPolygon. Если хотите сам стиль рамки поменять, вам в функцию applyStylesForCanvas, я там для примера поменял цвет stroke. Можно почитать по теме https://developer.mozilla.org/en-US/docs/Web/API/C...

[danilr]

Athanor, супер, спасибо - то что надо!) А рамки поправить с помощью самого первого инструмента?

[Athanor]

danilr, да, можно через него