Рафаэль JS и позиционирование текста?

Я пытаюсь разместить текст в холсте SVG, предоставив x, y координаты

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

но не позиционирует текст, как все остальные объекты...

x, y координаты определяют центр объекта! Не пиксель "левый и верхний"!

Я хотел бы "выравнивать по левому краю" текст вдоль строки, такой же, как стандартный HTML.

Помощь будет очень оценена.

Ответ 1

Решено!

Используя следующий

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

теперь выравнивает текст слева.

Ответ 2

Значение текстового привязки для текстового метода по умолчанию установлено на "средний".

Если вы хотите выровнять по левому краю, измените привязку текста к атрибутам для объекта:

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

Ответ 3

Я знаю, что вы не сказали, что вам нужно вертикально выровнять его сверху, но если вы хотите использовать paper.text вместо paper.print... и хотите, чтобы вертикальное выравнивание было верхним.

Попробуйте следующее:

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

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

И просто передайте ему текстовый объект Рафаэля. Он будет выравнивать его для вас. и просто вызовите эту функцию

Ответ 4

Следующий код хорошо работает в IE, Chrome (Firefox не проверен):

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

Объяснение:

в Рафаэле, текст по умолчанию задан по вашим x и y, вы можете установить выравнивание по левому краю с помощью:

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

но у вас нет атрибута для установки его верхнего выравнивания. Сначала я попробовал:

var b=t.getBBox();

но он вернул NaN в IE, поэтому я обратился к:

var b=t._getBBox();

_getBBox() недокументирован, но сам используется самим Рафаэлем, и он работает!

Надеюсь, что это поможет.