拉斐尔 - 更改

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

发生了什么？

来源

2011-12-15 Crane

我已经在这里回答了这个问题：http://stackoverflow.com/a/12176879/569751。希望这会有所帮助。 – 2012-08-29 11:35:33

正如本教程所述（不尽如人意），如果要将单个字母视为唯一的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-19 21:59:24 WiredPrairie

我有同样的问题，甚至使用cufon字体文件（并用Raphael.registerFont替换Cufon.registerFont）字体显示，但它不返回单个字母路径的数组 – gotofritz 2012-08-09 13:49:16

拉斐尔 - 更改

回答

相关问题