Raphael JS和Text定位？

Question

我正在尝试通过提供 x，y坐标

在SVG画布中定位文本

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

但不像所有其他对象一样定位文本...

x，y坐标指定对象的中心！ 不是“左上角”像素！

---

我希望 “左对齐” 文本沿着一行，与标准HTML相同。

非常感谢帮助。

Answer 1

默认情况下，text方法的Text-anchor属性设置为“middle”。

如果要左对齐，请在对象的属性中更改text-anchor：

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

Answer 2

我知道你没有说你需要将它垂直对齐到顶部，但如果你想使用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
    });
}

然后将Raphael文本对象传递给它。它将为您排列最佳位置。 并只是调用该函数

Answer 3

解决！

使用以下

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

它现在对齐左侧的文字。

Answer 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＆amp;默认情况下，您可以将左对齐设置为：

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

但您没有将其设置为顶部对齐的属性。我首先尝试过：

var b=t.getBBox(); 

但它在IE中返回了NaN，所以我转向：

var b=t._getBBox();

_getBBox（）是未记录的，但是由Raphael本身在内部使用，它可以工作！

希望它有所帮助。