javascript - Raphael JS 和文本定位？

Question

我正在尝试通过提供x、y 坐标在 SVG 画布中定位文本

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

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

x,y坐标指定物体的中心！不是“最左边和最上面”的像素！

我想将文本沿一条线“左对齐” ，与标准 HTML 相同。

帮助将不胜感激。

score 151 · Accepted Answer

文本方法的文本锚属性默认设置为“中间”。

如果要左对齐，请更改对象属性中的文本锚点：

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

score 20 · Accepted Answer

我知道你没有说你需要将它垂直对齐到顶部，但是如果你想使用 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 文本对象传递给它。它将为您顶部对齐。然后调用那个函数

score 10 · Accepted Answer

解决！

通过使用以下

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

它现在对齐左侧的文本。

score 0 · Accepted Answer

以下代码在 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 自己内部使用，并且有效！

希望能帮助到你。