javascript - examples - Raphael JS y posicionamiento de texto?

raphael js examples

Question

Intento colocar texto dentro del lienzo SVG, proporcionando coordenadas x, y

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

pero no coloca el texto como todos los demás objetos ...

Las coordenadas x, y especifican el centro del objeto. ¡No es el pixel "izquierdo y superior" !

Me gustaría "alinear a la izquierda" el texto a lo largo de una línea, al igual que el HTML estándar.

La ayuda sería muy apreciada.

Answer 1

¡Resuelto!

Al usar lo siguiente

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

ahora alinea el texto a la izquierda.

Answer 2

El siguiente código funciona bien en IE, Chrome (Firefox no probado):

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

Explicación:

en Raphael, el texto se centra alrededor de sus xey predeterminados de forma predeterminada, puede configurar alinear a la izquierda con:

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

pero no tiene ningún atributo para establecerlo en la alineación superior. Primero lo intenté:

var b=t.getBBox(); 

pero devolvió NaN en IE, así que recurrí a:

var b=t._getBBox();

_getBBox () no está documentado pero lo usa internamente Raphael, ¡y funciona!

Espero eso ayude.

Answer 3

La propiedad de anclaje de texto para el método de texto está establecida en ''medio'' de manera predeterminada.

Si quiere alinearlo a la izquierda, cambie el anclaje de texto en los atributos para el objeto:

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

Answer 4

Sé que no dijiste que necesitas alinear verticalmente hacia arriba, pero si quieres usar paper.text en lugar de paper.print ... y te gustaría alinear verticalmente para estar arriba.

Prueba esto:

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

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

Y solo pasa el objeto de texto de Raphael. Lo alineará para usted. y solo llama a esa función