Raphael JS:如何更改文本元素中某些字母的颜色? [英] Raphael JS: how to change the color of certain letters within a text-element?
问题描述
我有以下代码:
var set = paper.set();
var text = paper.text(0, 0, 'bla1 bla2' ).attr({ fill: 'blue'});
set.push(text);
我现在如何将'bla2'的颜色更改为绿色?
How can I change the color of the 'bla2' to green now?
我已经尝试将字符串分成两个文本元素,并将'bla1'+'bla1'宽度的坐标分配给第二个.由于我无法找出'bla1'的宽度,因此无法正常工作.此解决方案的第二个问题是,我可能想更改'bla1 bla2'的字体大小,这将自动更改'bla1'的宽度并扭曲'bla2'的位置.
I've already tried to split the string into two text-elements and assign the coordinates of the 'bla1'+ width of the 'bla1' to the second one. It didn't work since I coundn't find out the width of 'bla1'. The second problem with this solution is that I might want to change the font-size of 'bla1 bla2' which will automatically change the width of 'bla1' and distort the position of 'bla2'.
提前谢谢!
推荐答案
您可以尝试执行以下操作:
You can try something like this:
HTML:
<div id="canvas"></div>
JS:
var text = "this is some colored text";
var paper = Raphael('canvas', '100%', document.documentElement.clientHeight/2 );
var colors = ["#ffc000", "#1d1d1d", "#e81c6e", "#7c7c7c", "#00aff2"];
var letterSpace = 5;
var xPos = 10;
var yPos = 10;
textNodes = text.split(' ');
for( var i=0; i < textNodes.length; ++i) {
var textColor = colors[i];
var textNode = paper.text( xPos , yPos , textNodes[i]);
textNode.attr({
'text-anchor': 'start',
'font-size' : 12,
'fill' : textColor
});
xPos = xPos + textNode.getBBox().width + letterSpace;
}
演示: http://jsfiddle.net/aamir/zsS7L/
这篇关于Raphael JS:如何更改文本元素中某些字母的颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!