1

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

发生了什么 ？

4

1 回答 1

2

正如教程所述（不那么清楚），如果要将单个字母视为唯一的 SVG 路径，则需要将字体转换为“cufon”格式。如果您这样做，则 paper.print 函数将按预期工作。没有它，打印函数返回一个空数组（并且“字母[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 文本按预期着色（如原始教程页面所示）。

于 2011-12-19T21:59:24.333 回答