Как использовать элемент HTML для создания поверх холста в JQuery

Как использовать HTML-элемент {amp}lt;map{amp}gt; для создания {amp}lt;area{amp}gt; поверх холста в JQuery

Я работаю над обработкой изображений и получаю координаты многоугольника, где пользователь щелкает / нажимает. У меня есть координаты.

Я знаю, как использовать поверх изображения. Вот подробный пример этого

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

 {amp}lt;map name="map-canvas" id="mapid"{amp}gt; {amp}lt;!-- {amp}lt;area shape="poly" coords="130,147,200,107,254,219,130,228" href="https://developer.mozilla.org/docs/Web/HTML" target="_blank" alt="HTML" /{amp}gt; {amp}lt;area shape="poly" coords="130,147,130,228,6,219,59,107" href="https://developer.mozilla.org/docs/Web/CSS" target="_blank" alt="CSS" /{amp}gt; {amp}lt;area shape="poly" coords="130,147,200,107,130,4,59,107" href="https://developer.mozilla.org/docs/Web/JavaScript" target="_blank" alt="JavaScript" /{amp}gt; --{amp}gt; {amp}lt;/map{amp}gt; {amp}lt;div style="border:1px solid red;"{amp}gt; {amp}lt;canvas usemap="#map-canvas" id="canvas" class="map" style="border:1px solid darkgray;"{amp}gt;{amp}lt;/canvas{amp}gt; {amp}lt;/div{amp}gt; 

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

 $("#mapid").append('{amp}lt;area shape="poly" coords="'   areaPolygonCordinates   '" href="#" alt="myPolygon" /{amp}gt;') 

Как я мог этого добиться? Или любые другие предложения от вас, ребята.

Мне нужно, чтобы эта конкретная область была кликабельной и еще немного поработать с выбранным полигоном У меня есть много полигонов на холсте (около 200 до 1000).

РЕДАКТИРОВАТЬ: нативное решение JavaScript для создания адаптивных карт изображений, которые воспроизводятся при изменении изображения или области просмотра. Как этот

Любая такая библиотека, которая может заполнить / перерисовать карту поверх холста?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector