Question

（使用Raphael_2.01，WindowsXP，Firefox8.0.1）

您好，

我正在尝试通过参考“绘图文本”来更改文本的字母颜色 http://www.html5rocks.com/en/tutorials/raphael/intro/。

我可以显示文本“HTML5ROCKS”，但我无法更改颜色。

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

发生了什么事？

Answer 1

正如教程所述（不尽如人意），如果要将单个字母视为唯一的SVG路径，则需要将字体转换为“cufon”格式。如果这样做，paper.print函数按预期工作。没有它，print函数返回一个空数组（并且“letters [4]”崩溃）。

实验上，我从html5rocks中抓取了两个丢失的字体文件：

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

并将它们添加到示例HTML页面中：

<!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>

第二个HTML5ROCKS文本按预期着色（如原始教程页面所示）。

Raphael - 更改文本字符串的字母颜色

1 个答案: