开发者

Raphael JS library how to disable text shift on multi-line

By default when adding text object to paper Raphael javascript library centers text around y point. It basically takes the height and divides it by 2 and attaches text to开发者_如何学运维 the new y coordinate. I'm looking for a different behavior where text stays at the same coordinate even when you add multi lines.

I was wondering if anyone has a clean way to change that behavior. I can modify it in the source code but I would hate to constantly maintain it when new version comes out.

Thanks!


basically you have described the default action of text objects.

Use 'text-anchor':'start' inside an "attr" method.

I'm showing you to the Raphael Additional Resources help database where you can look at the text examples there and toggle with them in an interactive environment....

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


this is how I do it in one of my projects. You can try this if ypu paste the code to 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)

more elegant solutions are hihgly welcome.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜