Raphael JS: jak zmienić kolor niektórych liter w elemencie tekstowym?

Mam następujący kod:Raphael JS: jak zmienić kolor niektórych liter w elemencie tekstowym?

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

Jak mogę teraz zmienić kolor „bla2” na zielono?

Próbowałem już podzielić ciąg na dwa elementy tekstowe i przypisać współrzędne "bla1" + szerokość "bla1" do drugiego. Nie zadziałało, ponieważ nie mogłem znaleźć szerokości "bla1". Drugi problem z tym rozwiązaniem polega na tym, że chciałbym zmienić rozmiar czcionki "bla1 bla2", która automatycznie zmieni szerokość "bla1" i zniekształci pozycję "bla2".

Z góry dziękuję!

Źródło

2011-10-29 user1006115

jedynym sposób, w jaki mogę myśleć, to podzielić łańcuch. Aby uzyskać szerokość, użyj elementu element.getBBox() http://raphaeljs.com/reference.html#Element.getBBox –

również http://stackoverflow.com/questions/7881609/raphaeljs-substring-text-attributes –

Spróbuj http: //stackoverflow.com/questions/8517191/raphael-changing-the-letter-color-of-text-string –

Można spróbować czegoś takiego:

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; 
}

Demo: http://jsfiddle.net/aamir/zsS7L/

Źródło

2012-08-29 11:28:56

Raphael JS: jak zmienić kolor niektórych liter w elemencie tekstowym?

Odpowiedz

Powiązane problemy