webentwicklung-frage-antwort-db.com.de

Raphael JS und Textpositionierung?

Ich versuche Text innerhalb der SVG-Zeichenfläche zu positionieren, indem ich x, y-Koordinaten

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

positioniert den Text jedoch nicht wie alle anderen Objekte ...

x, y-Koordinaten geben die Mitte an des Objekts! Nicht das "linke und oberste" Pixel!}


Ich möchte "left align" den Text entlang einer Zeile genauso wie Standard-HTML.

Hilfe wäre sehr dankbar.

44
RadiantHex

Aufgelöst!

Durch die Verwendung der folgenden

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

der Text wird jetzt links ausgerichtet.

10
RadiantHex

Die Textankereigenschaft für die Textmethode ist standardmäßig auf "middle" gesetzt. 

Wenn Sie es links ausrichten möchten, ändern Sie den Textanker in Attributen für das Objekt:

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

Ich weiß, dass Sie nicht gesagt haben, dass Sie es vertikal nach oben ausrichten müssen, aber wenn Sie paper.text anstelle von paper.print verwenden möchten ... und vertikal ausrichten möchten, um oben zu sein.

Versuche dies:

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

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

Und übergeben Sie einfach das Raphael-Textobjekt. Es wird es für Sie nach oben ausrichten . Und diese Funktion einfach aufrufen 

20
Jimmy Chandra

Der folgende Code funktioniert gut in IE, Chrome (Firefox nicht getestet): 

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

Erklärung:

in Raphael wird der Text standardmäßig um das angegebene X & Y zentriert.

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

sie haben jedoch kein Attribut, um es am besten auszurichten. Ich habe zuerst versucht:

var b=t.getBBox(); 

aber es gab NaN in IE zurück, also wandte ich mich an:

var b=t._getBBox();

_getBBox () ist undokumentiert, wird aber von Raphael selbst verwendet und funktioniert!

Ich hoffe es hilft.

0
ciga