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

本文介绍了Raphael - 更改文本字符串的字母颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

您好，

尝试通过参考
的绘图文本更改文本的字母颜色。

我可以显示文字HTML5ROCKS，但我可以' t更改颜色。

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

推荐答案

由于教程指出（不是那么清楚），如果你想将单个字母当作唯一的SVG路径，你需要将字体转换为cufon格式。如果你这样做，paper.print函数按预期工作。没有这个打印函数返回一个空数组（和letters [4]崩溃）。

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).

实验上，我从html5rocks抓取了两个缺少的字体文件： p>

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

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

并将其添加到示例HTML页面：

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>

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

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

这篇关于Raphael - 更改文本字符串的字母颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！