Leaflet.Draw Пользовательский волнистый путь для прямоугольника

Как я могу применить собственный стиль контура к прямоугольнику в Leaflet.draw? Я играл с CSS и могу стилизовать его, но я не могу ничего сделать, кроме как с помощью stroke-width, stroke-dasharray и т. д. Мы создаем карту, которая позволяет людям помечать фотографии и хотят реализовать «фото». кадр" похоже на это. Возможно ли это?введите здесь описание изображения


leaflet leaflet.draw
person Chronix3    schedule 05.03.2016    source источник
comment
Вы имеете в виду добавление фотографий с этой рамкой или просто рамкой с прозрачным центром? Все векторные фигуры в Leaflet реализованы в SVG или Canvas. Если вы можете найти способ нарисовать свою рамку с помощью SVG или Canvas, вы можете преобразовать вектор (будь то из Leaflet.draw или чего-либо еще) в свою рамку.   -  person ghybs    schedule 05.03.2016
comment
Просто рамка, у меня уже есть изображения, отображаемые как SVG, но мне нужно применить рамку вокруг них. Если я могу нарисовать рамку с помощью SVG, как я могу настроить свою фигуру для ее использования?   -  person Chronix3    schedule 05.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я бы сделал так, например:

  1. Как только пользователь нарисует прямоугольник, получите размеры прямоугольника. Найдите "draw:created" событие.
  2. Сгенерируйте код для пользовательского фрейма SVG на основе этих размеров.
  3. Вставьте SVG на карту (возможно, заменив прямоугольник Leaflet.draw), аналогично наложению изображения.

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

Вам может быть интересно:

Если ваш пользовательский кадр SVG не нужно динамически генерировать (т. е. вы можете экспортировать его в независимый файл, и он автоматически настраивает свои «волны» в зависимости от отображаемого размера), то стандартного наложения изображения может быть даже достаточно.

person ghybs    schedule 05.03.2016