1

テキストを翻訳して回転させようとしていますが、テキストがかなりひどくスクランブルされているようです。ここに例があります。http://jsfiddle.net/WAbZz/

var paper = Raphael("ocular", 500, 500);
var label = paper.text(100, 100, "Coeur et Artères");
label.attr('fill', '#555');
label.attr('font-size', '12px');
label.attr('cursor', 'pointer');

//label.transform("t200,200");// translate only
//label.transform("r98");// rotate only
label.transform("t200,200r98");// translate and rotate

この問題は、回転するだけでも発生するようです。翻訳と回転だけのコメントアウトされたセクションがあるため、テストする場合のコンテキストがあります。

私は何か間違ったことをしていますか、それとも別の方法を使用して変換と変換を行う必要がありますか?

ありがとう

4

1 に答える 1

0

私はこの正確な問題に遭遇しました。残念ながら、独自の JavaScript バージョンを生成して特定のフォントを限定化する必要があります (ここで実行できます) - 必ず Raphael を選択してください。

Raphael js ファイルの後に cufon フォント js ファイルをリンクしてください。これらのファイルは非常に大きくなる可能性があります。使用するグリフのみを含め、Web サーバーで gzip が有効になっていることを確認してください。

ファイルは、(Cufon ではなく) Raphael に登録するためにcall registerFontを呼び出す必要があります。

textの代わりにprintを使用する必要があります。ネイティブまたは Google Web フォントの場合のように font-family、font-size、および letter-spacing を設定する必要はなくなりました (これらは print 関数のパラメーターです)。注: attr 値の設定は、印刷ではテキストとは異なります (印刷はパスの「セット」です)。

また、印刷とテキストでは位置合わせの違いがあることに注意してください。これにより、回転が困難になる可能性があります。

<script src="raphael.js"></script>
<script src="my-cufon-font-file.js"></script>

<div id="ocular"></div>

<script>

    var angle = 95; // degrees

    var paper = Raphael("ocular", 500, 500);
    paper.print(100, 100, "Coeur et Artères", paper.getFont('My Cufon Font Name'), 12, 'middle', '1')
        .transform('R' + angle)
        .attr({
            fill: '#555',
            cursor: 'pointer'
        });
</script>
于 2013-08-22T16:36:48.287 に答える