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

这就是我在其中一个项目中的表现。如果ypu将代码粘贴到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)

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

Raphael JS库如何禁用多行文本移位

2 个答案: