8

Raphaelのドキュメントに記載されている print コマンドを使用して、テキストを素敵なフォントで印刷しようとしています。[これは「テキスト」関数を使用してうまく実行できることがわかります。印刷関数で Cufon によって生成されたフォントを使用する例を Web で見ます (これらの 'text' および 'print' の例のように)。私がやっているのは、ドキュメントの例にできる限り近いものですが、私にはうまくいきません。その理由を知りたいです。]

これが私のコードです：

<html>
    <head>
        <title>Raphael Print Test</title>
        <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        window.onload = function() {
            var paper = new Raphael('holder', 640, 480);
            paper.ellipse(320, 240, 320, 240).attr({stroke: "grey"});
            paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
            paper.text(50, 50, "Raphaël\nkicks\nbutt!");
        }
        </script>
        <style type="text/css">  
            #holder { width: 640px; height: 480px; border: 2px solid #aaa; }  
        </style>  
    </head>  
    <body>  
        <div id="holder"></div>  
    </body>  
</html>

重要な行は次のとおりです。

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

ここに記載されているとおり。

試してみると（これまでのところ、OS XのChromeとOperaで）、次のようになります。

  • 描画する白い領域
  • 灰色の楕円
  • 「Raphaël\nicks\nbutt!」というテキスト

しかし、「テスト文字列」がどこにも表示されません。

Raphael v 1.4.7 を使用しています (昨日の時点ではこれが最新だと思っていましたが、バージョン 1.5.2 が出ているようです)。

4

1 に答える 1

19

(registerFont() を呼び出して) フォントを明示的に登録しないと、print() を使用できません。Cufon は通常、これを行う方法のようです。Cufon では、カスタム フォントを使用できます。標準フォントを使用する場合は、text() を使用し、attr() 関数を使用してフォント プロパティを設定できます。

自分のページに埋め込まれたときにサンプルの「印刷」機能が機能しない理由を理解するのにしばらく時間がかかりました。簡単な答えは、最初に「registerFont」関数を呼び出さないと「print」関数を使用できないということです。

Raphael の参照ページのソースを注意深く見ると、「 museo.js」ページに埋め込まれているため、使用している「registerFont」呼び出しに気付かないでしょう。そこに「registerFont」呼び出しが表示されます。また、印刷サンプル コードでは、'Times' フォントではなく、'Museo' フォントで印刷機能を実際に使用していることにも注意してください。

この時点で、attr() 関数と組み合わせた text() 関数で十分であることに気付きました。

以下は、text() および attr() 関数を使用して、標準フォントの 1 つで何かを表示する方法を示す簡単なコード スニペットです。

paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr(
  {"font-family":"serif",
   "font-style":"italic",
   "font-size":"30"});

text() 関数の出力に対して attr() を呼び出すだけで、必要なプロパティを指定できます。

カスタム フォントを必要としない場合に、問題と考えられる解決策を理解するのに役立つことを願っています。

于 2011-04-19T10:58:33.503 に答える