Mettez l'étiquette au "centre" d'un chemin SVG

J'essaie de dessiner une étiquette sur un polygone d'un fichier svg. Le problème auquel je fais face est de trouver approximativement le centre de ce polygone pour placer l'étiquette, car les coordonnées du chemin sont au format svg et doivent être analysées. Y at-il un moyen plus facile de déterminer le centre d'un polygone svg (peut-être quelqu'un peut pointer une bibliothèque javascript ou un extrait)? J'utilise Raphael javascript library pour manipuler le svg, mais il ne semble pas aller au-delà de la fonctionnalité svg standard.Mettez l'étiquette au "centre" d'un chemin SVG

Source

2009-11-07 sol

La chose la plus simple que vous pourriez faire est de calculer le centre en prenant la moyenne de tous les points du polygone. Il devrait fonctionner pour tous sauf les polygones les plus irréguliers. J'ai utilisé le même algorithme à bon escient dans mes programmes.

Bonne chance.

Source

2009-11-07 04:36:09 Randaltor

Désolé, pour ne pas ma question clairement phrasé. Le problème est plus sur la façon d'obtenir les coordonnées de l'attribut d du chemin qui est dans ce format afin de calculer le centre ou de trouver une librairie javascript qui le fait sans que j'analyse l'attribut en fonction de la spécification svg. – sol

Le premier problème à résoudre en premier est de convertir le svg en polygone en premier. J'ai cherché un code pour convertir les chemins de svg en polygones mais n'ai pas pu trouver un. Peut-être avoir à creuser sur les codes source des projets svg – ivanceras

Vous pouvez essayer l'approximation suivante pour faire quelque chose de similaire à la suggestion du polygone, basé sur des méthodes SVG DOM:

var totalPathLength = pathelm.getTotalLength(); 
var step = totalPathLength/100; 
for(var dist=0; dist < totalPathLength; dist+=step) 
{ 
    var pt = pathelm.getPointAtLength(dist); 
    addToAverage(pt.x, pt.y); 
}

Je pense que la plus simple approche consiste à utiliser le centre de BoundingBox (de pathelm de l'élément de chemin. getBBox()), c'est plus simple que la suggestion de polygone.

Source

2009-11-07 11:33:46

+11

PS: 'var bbox = p.getBBox(); var x = Math.floor (bbox.x + bbox.width/2.0); var y = Math.floor (bbox.y + bbox.height/2.0), 'fait l'affaire pour moi, merci. – lwe

Merci @Iwe! C'était beaucoup plus simple que je pouvais imaginer :) – Viet

@ Le commentaire de Iwe mérite d'être une réponse distincte. C'est une approche plus simple et différente avec des avantages et des inconvénients différents. Voici une [** démonstration JSBIN des deux formes de pays du Vietnam et du Canada **] (http://jsbin.com/orAzoFI/3/edit) montrant quelques points clés et différences: qu'aucune méthode ne garantit que le centre sera à l'intérieur du forme, et que la méthode d'Erik tire le centre vers des parties du chemin qui sont plus fracturées/complexes/ont une circonférence relative plus élevée. – user568458

-2

insérer une balise de texte à l'intérieur du svg et la position en calculant la largeur et la hauteur

<svg width="447pt" height="559pt" viewBox="0 0 894 1118" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    ............ 
    ............ 

    <text x="450" y="300" font-family="Verdana" font-size="15" fill="red" > 
     Text To Show 
    </text> 
</svg>

Source

2012-10-18 11:36:16

Mettez l'étiquette au "centre" d'un chemin SVG

Répondre

Questions connexes