Raphael JS 和文本定位？

Question

我正在尝试通过提供x，y坐标在SVG画布内部定位文本。

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

但是它不像其他对象一样定位文本...

x，y坐标指定对象的中心！而不是最左侧和最上方的像素！

---

我想要将文本"左对齐"到一条线上，就像标准HTML一样。

非常感谢您的帮助。

- RadiantHex

Answer 1

默认情况下，文本方法的text-anchor属性设置为"middle"。

如果您想要左对齐，则需要更改对象属性中的text-anchor：

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

- Dasha Salo

---

这可能是我第四次查看这个问题并获得你的答案。先点赞。 ;) - pp19dd

但是有顶部锚点吗？ - john-jones

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文本对象传递给它。它会为您进行顶部对齐。 并调用该函数。

- Jimmy Chandra

---

正如你所说，@RadiantHex并没有要求垂直对齐，但至少它对我有所帮助，谢谢！ - karlisup

谢谢你的帮助，好先生！t.attr({y:})的参考对我帮助很大，救了我的一命! :) - streetlogics

Answer 3

已解决！

通过使用以下内容：

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

现在它将文本靠左对齐。

- RadiantHex

---

paper.print()和paper.text()不同，因为print()返回一组对象，每个对象都类似于字符的路径。请参考@dasha salo的答案获取正确的“text”解决方案。不幸的是，目前还没有竖直对齐属性。 - MKroehnert

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);

解释：

在 Raphael 中，默认情况下，文本会以给定的 x 和 y 为中心对齐，你可以通过以下方式设置左对齐：

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

但是您没有属性来设置它的顶部对齐。我首先尝试了：

var b=t.getBBox(); 

但在IE中它返回了NaN，所以我转而使用：

var b=t._getBBox();

_getBBox()是Raphael内部使用但未记录在文档中的函数，它能够正常工作！

希望这能有所帮助。

- ciga