拉斐尔JS和文本定位?

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

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

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

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


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

帮助将非常感激。

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

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

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

我知道你没有说你需要垂直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你。 只是调用该函数

解决!

通过使用以下

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

它现在alignment左侧的文字。

以下代码在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本身使用,它的工作原理!

希望能帮助到你。