拉斐爾 - 更改

（使用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

拉斐爾 - 更改

回答

相關問題