开发者

Text with underline line in Raphael JS

开发者 https://www.devze.com 2023-03-18 11:33 出处:网络
I want to make a simple thinge. Just a 开发者_开发百科text with underline line liketag in html. How can i do it in Raphael JS?Here is a function that should do what you\'re after:

I want to make a simple thinge. Just a 开发者_开发百科text with underline line like tag in html. How can i do it in Raphael JS?


Here is a function that should do what you're after:

function underlineText(textElement) {
    var textBBox = textElement.getBBox();
var textUnderline = canvas.path("M"+textBBox.x+" "+(textBBox.y+textBBox.height)+"L"+(textBBox.x+textBBox.width)+" "+(textBBox.y+textBBox.height));  
}

var textElement = canvas.text(100,100,"hello world");
underlineText(textElement);


Works for SVG canvas, not tested with VML (<=IE8):

var text=paper.text(...);
if (text.node){
    $(text.node).css('text-decoration','underline');
}

You can set any CSS3 text attribute on an SVG element, and CSS2 attribute on a VML element.


I think the previous answer is not good anymore (since for me it's not working at all), but with a few tricks I got it working as a charm.

Here it is:

var underlineText = function () {
var textBBox = textElement.getBBox();
var textUnderline = paper.path("M"+textBBox.x+" "+(textBBox.y+textBBox.height)+"L"+(textBBox.x+textBBox.width)+" "+(textBBox.y+textBBox.height));};

underlineText(textElement);

Cheers!

www.stefanomoscardini.it

0

精彩评论

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