Raphael JS et le positionnement du texte?

Question

J'essaie de positionner du texte dans le canevas SVG en fournissant des coordonnées x, y

 var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
 

mais ne positionne pas le texte comme tous les autres objets ...

Les coordonnées x, y spécifient le centre de l'objet! Pas le pixel "le plus à gauche et le plus haut" !

---

J'aimerais "aligner à gauche" le texte le long d'une ligne, comme en HTML standard.

L'aide serait très appréciée.

Answer 1

La propriété text-anchor de la méthode text est définie sur 'middle' par défaut.

Si vous souhaitez l'aligner à gauche, changez l'ancrage du texte dans les attributs de l'objet:

 var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr({'text-anchor': 'start'});
 

Answer 2

Je sais que vous n'avez pas dit que vous devez l'aligner verticalement vers le haut, mais si vous voulez utiliser paper.text au lieu de paper.print ... et que vous souhaitez aligner verticalement pour qu'il soit en haut.

Essaye ça:

 function alignTop(t) {
    var b = t.getBBox();
    var h = Math.abs(b.y2) - Math.abs(b.y) + 1;

    t.attr({
        'y': b.y + h
    });
}
 

Et passez simplement l'objet texte Raphaël à celui-ci. Il va l'aligner pour vous. et juste appeler cette fonction

Answer 3

Résolu!

En utilisant ce qui suit

 paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
 

il aligne maintenant le texte sur la gauche.

Answer 4

Code suivant fonctionne bien sous IE , Chrome (Firefox pas testé):

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"),
    b = t._getBBox();
t.translate(-b.width/2,-b.height/2);

Explication:

chez Raphaël , le texte est centré autour de votre x & y par défaut, vous pouvez définir gauche aligner avec:

t.attr({'text-anchor':'start'})

mais vous n'avez pas d'attribut pour définir top aligner. J'ai tout d'abord essayé :

var b=t.getBBox(); 

mais elle est revenue NaN dans IE, donc je me suis tourné vers:

var b=t._getBBox();

_getBBox() est sans-papiers, mais utilisé en interne par Raphaël lui-même , et ça marche!

Espérons que cela aide.