2016-03-05 3 views
0

Comment puis-je appliquer un style de chemin personnalisé à un rectangle dans Leaflet.draw? J'ai joué avec le CSS et je peux le styliser, mais je ne peux rien faire de plus que l'utilisation de la largeur de trait, du trait, etc. Nous construisons une carte qui permet aux gens d'étiqueter des photos et de mettre en œuvre une photo cadre "genre de sensation comme celle-ci. C'est possible? enter image description hereLeaflet.Draw Chemin ondulé personnalisé pour le rectangle

+0

Voulez-vous dire ajouter des photos avec ce cadre autour, ou juste le cadre avec un centre transparent? Toutes les formes vectorielles dans Leaflet sont implémentées en SVG ou Canvas. Si vous pouvez trouver un moyen de dessiner votre cadre en utilisant SVG ou Canvas, vous pouvez convertir un vecteur (que ce soit de Leaflet.draw ou autre chose) à votre cadre. – ghybs

+0

Juste le cadre, j'ai déjà les images qui apparaissent en tant que SVG mais doivent appliquer un cadre autour de lui. Si je peux dessiner le cadre en utilisant SVG, comment puis-je définir ma forme pour l'utiliser? – Chronix3

Répondre

0

je le ferais de cette façon, par exemple:

  1. Une fois que l'utilisateur dessine un rectangle, récupérer les dimensions du rectangle. Recherchez "draw:created" event.
  2. Générez le code du cadre SVG personnalisé en fonction de ces dimensions.
  3. Insérez le SVG sur la carte (en remplaçant éventuellement le rectangle Leaflet.draw), de manière similaire à une superposition d'image.

Pour la dernière étape, vous auriez probablement besoin de modifier légèrement le code L.imageOverlay afin qu'il ajoute un conteneur SVG plutôt qu'une image, mais il ne devrait pas y avoir de difficulté à le faire.

Vous pourriez être intéressé par:

Si votre commande La trame SVG n'a pas besoin d'être générée dynamiquement (c'est-à-dire que vous pouvez l'exporter dans un fichier indépendant, et elle ajuste automatiquement ses "vagues" en fonction de sa taille affichée), alors le recouvrement d'image standard pourrait même suffire.