web-dev-qa-db-fra.com

Raphael JS et positionnement de texte?

J'essaie de positionner du texte dans le canevas SVG en fournissant 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 ...

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

Je voudrais "left align" le texte le long d'une ligne, comme au format HTML standard.

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

javascriptsvgraphael
44
RadiantHex

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.

10
RadiantHex

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'});
149
Dasha Salo

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 être au dessus.

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 alignera dessus pour vous . Et appelez juste cette fonction 

20
Jimmy Chandra

Le code suivant fonctionne bien dans IE, Chrome (Firefox non testé): 

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

Explication:

dans Raphael, le texte est centré autour de votre x & y donné par défaut, vous pouvez définir aligner à gauche avec:

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

mais vous n'avez aucun attribut pour le mettre en alignement. J'ai d'abord essayé:

var b=t.getBBox();

mais il est revenu NaN dans IE, alors je me suis tourné vers:

var b=t._getBBox();

_getBBox () est non documenté mais utilisé en interne par Raphael lui-même, et ça marche!

J'espère que ça aide.

0
ciga