1

Google フォントの読み込みに問題があります。標準、@import、JavaScript の 3 つの異なる方法でロードしようとしましたが、従うべき結果はありませんでした。ただし、KineticJS フレームワークでトゥイーンを実行すると、フォントが同時に読み込まれ、問題なく表示されます。

私のコードは次のようになります。

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    WebFontConfig = {
        google: { families: [ 'Hanalei::latin' ] }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })(); </script>
    </head>
    <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
    <script defer="defer">
    var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 600
    });

  var layer = new Kinetic.Layer();

    var text1 = new Kinetic.Text({
    x: 100,
    y: 100,
    text: 'Test',
    fontSize: 20,
    fontFamily: 'Hanalei',
    fill: 'black'
  });


  layer.add(text1);
  stage.add(layer);

</script>

4

3 に答える 3

1

@JohnnyJS が言うように、フォントを使用する前に、フォントを完全にロードする必要があります。

設定wf.async='true'することで、ブラウザがバックグラウンドでフォントをダウンロードしている間、Kinetic のロードを続行するように指示します。

したがって、キネティック テキストは、フォントが使用可能になる前にレンダリングされます。

設定するwf.async='false'と、webfontJS はフォントが読み込まれるのを待ってから、Kinetic の読み込みを続行します。

したがって、フォントは完全にロードされ、kinetic.text が必要とするときに利用可能になります。

ただし、wf.async='false' を使用すると、フォントの読み込み中にブラウザーが停止します。

非同期を使用する場合はactive、WebFontConfig でコールバックを定義する必要があります。

コールバックは、activeフォントが完全に読み込まれた後にトリガーされます。

そのため、フォントが完全に利用可能であることを知って、そのコールバックに応答して kinetic.text の作成を開始します。

于 2013-08-25T19:43:17.423 に答える
0

onloadステージを初期化する前にイベントを使用します。

(キャンバス上で動的に描画するには、実際にページに読み込まれたフォントが必要です。)

あなたが尋ねたように、私はずっと前に見つけた素晴らしい方法で画像をロードします。

$(document).ready(function(){
    function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}
function initStage(images) {
// create awesome stuff....
}

sources = {
brain: "res/brain.png",
f_body_blue_glow: "res/f-body-blue-glow.png",
f_body_blue: "res/f-body-blue.png",
f_body_green: "res/f-body-green.png"
}
loadImages(sources,initStage);
});

これは特に画像用ですが、少し変更すればあらゆるアセット用になると思います。したがって、Googleフォントにjquery$.get()を使用し、ハンドラーでコールバックを呼び出します（例initStage()）

幸運を。

于 2013-08-25T19:13:40.500 に答える