Raphael JS et de positionnement de Texte?

Je suis en train de positionner le texte dans le SVG, canvas, par la fourniture de coordonnées x, y

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

mais ne pas positionner le texte à l'instar de tous les autres objets...

coordonnées x, y, spécifiez le centre de l'objet! Pas le "en haut et à gauche de la plupart des" pixel!

Je voudrais "aligné à gauche" le texte le long d'une ligne, de même que la norme HTML.

Aide serait très appréciée.

InformationsquelleAutor RadiantHex | 2010-01-23
  1. 150

    Texte d'ancre de propriété pour le texte de la méthode de "milieu" par défaut.

    Si vous voulez pour aligner à gauche il alors modifier le texte d'ancre dans les attributs de l'objet:

    var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr({'text-anchor': 'start'});
    • pourquoi n'était-ce marqué que la bonne réponse?
    • Probablement le 4e temps pour moi de regarder cette question et obtenir une réponse. D'abord pour upvote. 😉
    • mais est-il un ancrage supérieure?
    InformationsquelleAutor Dasha Salo
  2. 20

    Je sais que vous n'avez pas dit que vous devez verticale de l'aligner sur le dessus, mais si vous souhaitez utiliser du papier.texte au lieu de le papier.imprimer... et voudrais vertical align être en haut.

    Essayez ceci:

    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 vient de passer le Raphaël objet texte pour elle. Il sera en haut de l'aligner pour vous.
    et il suffit d'appeler cette fonction

    • Comme Vous l'avez dit @RadiantHex n'ai pas demandé pour le vertical align, mais au moins, ça m'a aidé, merci!
    • Merci monsieur pour la t.attr({y}) de référence, vous avez sauvé mon cul! 🙂
    InformationsquelleAutor Jimmy Chandra
  3. 10

    Résolu!

    À l'aide de la

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

    maintenant aligne le texte à gauche.

    • pouvez-vous expliquer pourquoi?
    • papier.print() n'est pas la même que pour le papier.texte() car print() retourne un ensemble d'objets où chaque objet est un chemin qui ressemble à un personnage. Voir @dasha salo de réponse pour le bon "texte" de la solution. Malheureusement, il n'est pas de l'alignement vertical de la propriété à l'heure actuelle.
    InformationsquelleAutor RadiantHex
  4. 0

    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:

    de 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, et j'ai donc pris:

    var b=t._getBBox();

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

    Espère que cela aide.

    InformationsquelleAutor ciga