拉斐尔JS和文本定位？

我试图通过提供x，y坐标在SVGcanvas中定位文本

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

但不像所有其他对象那样定位文本…

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

---

我想沿着一条线“左alignment”文本，与标准HTML相同。

帮助将非常感激。

Answer 1

text方法的text-anchor属性默认设置为“middle”。

如果要将其左alignment，则更改该对象的属性中的文本锚点：

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

Answer 2

我知道你没有说你需要垂直alignment到顶部，但是如果你想使用paper.text而不是paper.print …并且想垂直alignment到顶部。

尝试这个：

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

只需传递Raphael文本对象即可。 它将顶部alignment你。 只是调用该函数

Answer 3

解决！

通过使用以下

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

它现在alignment左侧的文字。

Answer 4

以下代码在IE浏览器中运行良好，Chrome（Firefox未经testing）：

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

说明：

在Raphael中，默认情况下，文本是以你给定的x＆y为中心的，你可以设置左alignment：

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

但是你没有任何属性来设置它顶部alignment。 我首先尝试了：

 var b=t.getBBox(); 

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

 var b=t._getBBox(); 

_getBBox（）没有logging，但由Raphael本身使用，它的工作原理！

希望能帮助到你。