Рафаэль Дж. С.: как изменить цвет некоторых букв внутри текстового элемента? - PullRequest
Новая
       20

Рафаэль Дж. С.: как изменить цвет некоторых букв внутри текстового элемента?

6 голосов
/ 30 октября 2011

У меня есть следующий код: 

        var set = paper.set();
        var text = paper.text(0, 0, 'bla1 bla2' ).attr({ fill: 'blue'});
        set.push(text);

Как мне теперь изменить цвет 'bla2' на зеленый?

Я уже пытался разбить строку на два текстовых элемента и назначить координаты 'bla1' + ширина 'bla1' второму. Это не сработало, так как я не могу определить ширину 'bla1'. Вторая проблема, связанная с этим решением, заключается в том, что мне может потребоваться изменить размер шрифта «bla1 bla2», который автоматически изменит ширину «bla1» и исказит положение «bla2».

Заранее спасибо!

1 Ответ

6 голосов
/ 29 августа 2012

Вы можете попробовать что-то вроде этого:

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/

...