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.
精彩评论