Google Fonts won't load when using KineticJS

StackOverflow https://stackoverflow.com/questions/18428663

Frage

I'm having trouble with getting my Google Font to load. I have tried to get it to load with the three different methods, standard, @import and JavaScript, but with no result to follow. Although if I run a tween with the KineticJS framwork the font load at the same time and looks just fine.

My code looks something like this.

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

War es hilfreich?

Lösung

I had the same problem with FontAwesome. Here is my solution:

//wait for fontawsome to load
setTimeout(function(){
   kineticStuff();
}, 500);

No need to do anything else.

Andere Tipps

As @JohnnyJS says, you must let your fonts fully load before using them.

By setting wf.async='true' you are telling the browser to continue loading Kinetic while it downloads the font in the background.

Therefore your kinetic text is rendered before the font is available.

You can set wf.async='false' and webfontJS will wait for the font to load before continuing to load Kinetic.

Therefore the font will be fully loaded and available when kinetic.text needs it.

However, with wf.async='false' the browser is halted while the font loads.

If you want to use async, you should define the active callback in WebFontConfig.

The active callback is triggered after the font is fully loaded.

So you would begin building your kinetic.text in response to that callback, knowing the font was fully available.

Use event onload before initialise the stage.

(u need the fonts actually loaded in the page for kinetic drawin 'em on the canvas.)

as you asked i load images in some great way that i found a long time ago.

$(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);
});

This is specifically for images but i think with little modifications it will be for any asset, hence use jquery's $.get() for the google font, and in the handler call the callback (ex. initStage())

Good luck.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top