Raphael — Changing the letter color of text string

(using Raphael_2.01, WindowsXP, Firefox8.0.1)

Hello,

I'm trying to change the letter color of text by referring to "Drawing Text" of http://www.html5rocks.com/en/tutorials/raphael/intro/ .

I can display the text "HTML5ROCKS" but I can't change the color.

var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Courier"), 40);
// I think "Vegur" is Mac font. So I change it to "Courier".

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
    letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

What happened ?

As the tutorial states (not as clearly as it should), you need to convert the font into the "cufon" format if you want to treat the individual letters as unique SVG paths. If you do that, the paper.print function works as expected. Without that the print function returns an empty array (and the "letters[4]" crashes).

Experimentally, I grabbed the two missing font files from html5rocks:

<script src="Vegur.font.js"></script>
<script src="cufon.js"></script>

and added them to a sample HTML page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Raphaël—JavaScript Library</title>
</head>
<body>
    <div id="demo-1"></div>
    <script src="raphael.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/Vegur.font.js" type="text/javascript"></script>
    <script src="Scripts/cufon.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var paper = Raphael("demo-1", 320, 200);
            var t = paper.text(50, 10, "HTML5ROCKS");
            var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
            letters[4].attr({ fill: "orange" });
            for (var i = 5; i < letters.length; i++) {
                letters[i].attr({ fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D" });
            }
        });        
    </script>
</body>
</html>

The second HTML5ROCKS text is colored as expected (as shown on the original tutorial page).

来源：https://stackoverflow.com/questions/8517191/raphael-changing-the-letter-color-of-text-string

标签

text

colors

raphael

letter