Raphael JS e posicionamento de texto?

Question

Estou tentando posicionar o texto dentro da tela SVG, fornecendo x, y coordenadas

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

mas não posiciona o texto como todos os outros objetos ...

x, y coordenadas especificam o centro do objeto! Não o "Mais à esquerda e no topo" Pixel!

---

Eu gostaria de "Alinhado esquerdo" O texto ao longo de uma linha, o mesmo que o HTML padrão.

A ajuda seria muito apreciada.

Answer 1

Resolvido!

Usando o seguinte

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

Agora alinha o texto à esquerda.

Answer 2

Propriedade da âncora de texto para o método de texto é definida como 'meio' por padrão.

Se você deseja deixar alinhá-lo, altere a âncora de texto em atributos para o objeto:

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

Answer 3

Eu sei que você não disse que precisa alinhá -lo vertical ao topo, mas se quiser usar papel.text em vez de papel.

Experimente isso:

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

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

E apenas passe o objeto de texto de Raphael para ele. Isso será alinhar para você. e apenas chame isso de função

Answer 4

A seguir, o código funciona bem no IE, Chrome (Firefox não testado):

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

Explicação:

Em Raphael, o texto é centrado em torno do seu X & Y por padrão, você pode definir a esquerda alinhada com:

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

Mas você não tem atributo para defini -lo com o alinhamento superior. Eu tentei primeiro:

var b=t.getBBox(); 

Mas voltou a Nan no IE, então eu me virei para:

var b=t._getBBox();

_GetBbox () não é documentado, mas usado internamente pelo próprio Raphael, e funciona!

Espero que ajude.