1

(Raphael_2.01、WindowsXP、Firefox8.0.1を使用)

こんにちは、

http://www.html5rocks.com/ja/tutorials/raphael/intro/の「Drawing Text」を参考に、テキストの文字色を変えてみました 。

「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 関数は期待どおりに機能します。それがないと、print 関数は空の配列を返します (そして、"letters[4]" がクラッシュします)。

実験的に、html5rocks から不足している 2 つのフォント ファイルを取得しました。

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

2 番目の HTML5ROCKS テキストは、期待どおりに色付けされています (元のチュートリアル ページに示されているとおり)。

于 2011-12-19T21:59:24.333 に答える