javascript - Raphael JS库如何在多行上禁用文本移位

Question

默认情况下，将文本对象添加到纸张时，Raphael javascript 库将文本围绕 y 点居中。它基本上采用高度并将其除以 2 并将文本附加到新的 y 坐标。我正在寻找一种不同的行为，即使您添加多行，文本也会保持在相同的坐标。

我想知道是否有人有干净的方法来改变这种行为。我可以在源代码中修改它，但我不想在新版本出现时不断维护它。

谢谢！

Answer 1

基本上你已经描述了文本对象的默认操作。

在“attr”方法中使用 'text-anchor':'start'。

我正在向您展示 Raphael Additional Resources 帮助数据库，您可以在其中查看文本示例并在交互式环境中切换它们......

http://www.irunmywebsite.com/raphael/additionalhelp.html?q=text

Answer 2

这就是我在我的一个项目中的做法。如果你将代码粘贴到http://raphaeljs.com/playground.html ，你可以试试这个

// create rectangle 

var locx = 300
var locy = 200
paper.rect(locx, locy, 100,100)

// create raw text

element2 = paper.text(locx, locy, "Raphael\n \njust\nrocks")

element2.attr("text-anchor", "start")

// measure the raw text

var bbox = element2.getBBox()


// compute the scale

var scalex = 100/bbox["width"]
var scaley = 100/bbox["height"]

var translation = "s"+ scalex + "," + scaley

// scale the text
element2.transform(translation)

// measure the scaled text
var bbox = element2.getBBox()

// compute the offets of the scaled text

offsetx = locx - bbox["x"]
offsety = locy - bbox["y"]

translation = translation + "T" + offsetx + "," + offsety

// do the final translation

element2.transform(translation)

更优雅的解决方案非常受欢迎。