Raphael JS et le positionnement du texte?

StackOverflow https://stackoverflow.com/questions/2124763

  •  22-09-2019
  •  | 
  •  

Question

Je suis en train de positionner le texte dans le canevas SVG, en fournissant coordonnées x, y 

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

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

x, y coordonnées spécifier le centre de l'objet! Non "gauche et en haut le plus" pixel!

Je voudrais "aligner à gauche" le texte le long d'une ligne, même en HTML standard.

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

Était-ce utile?

La solution 3

Résolue!

En utilisant les éléments suivants 

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

il aligne maintenant le texte sur la gauche.

Autres conseils

propriété Texte d'ancrage pour la méthode de texte est réglé sur « milieu » par défaut.

Si vous voulez gauche aligner puis changer le texte d'ancrage dans les attributs de l'objet: 

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

Je sais que vous ne dites pas que vous devez aligner vertical pour le haut, mais si vous voulez utiliser paper.text au lieu de paper.print ... et souhaitez alignement vertical être supérieur.

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 il suffit de passer l'objet texte Raphaël à lui. Il Aligner en haut pour vous. et il suffit d'appeler cette fonction

code suivant fonctionne bien dans IE, Chrome (Firefox n'a pas été testé): 

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

Explication:

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

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

mais vous avez pas d'attribut pour le définir Aligner en haut. Je tout d'abord essayé: 

var b=t.getBBox();

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

var b=t._getBBox();

_getBBox () est en situation irrégulière, mais utilisée en interne par Raphaël lui-même, et ça marche!

it helps.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top