KineticJS를 사용할 때 Google 글꼴이로드되지 않습니다.

Google 글꼴을로드하는 데 문제가 있습니다. 필자는 표준, @import 및 JavaScript의 세 가지 다른 메서드를로드하려고했지만 결과는 따르지 않았습니다. 비록 내가 KineticJS 프레임 워크로 트위닝을 실행한다면 동시에 글꼴로드가 잘되고 잘 보일지라도.KineticJS를 사용할 때 Google 글꼴이로드되지 않습니다.

내 코드는 다음과 유사합니다.

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

출처

2013-08-25 labowhat

나는 FontAwesome에서 같은 문제가있었습니다. 여기 내 해결책은 다음과 같습니다.

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

다른 작업은 필요하지 않습니다.

출처

2014-06-03 12:40:59

그것은 작동합니다 !!!! 고마워 ! –

사용 이벤트 onload 전에 무대를 초기화.

는 (u는 글꼴이 실제로 캔버스에 '운동 drawin의 페이지에 그들을로드해야합니다.)

당신은 내가 오래 전에 발견 몇 가지 좋은 방법으로 이미지를로드 요청한다.

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

이 이미지를 위해 특별히입니다하지만 난 그것을 따라서 구글 글꼴 jQuery의 $.get()을 사용하고 핸들러에서 콜백 호출, 어떤 자산이 될 것입니다 약간의 수정을 생각한다 (예를. initStage())

행운을 빕니다.

출처

2013-08-25 19:13:40 JohnnyJS

나는 이해할 수 없으므로 작동하지 않습니다. 내가 코드와 정확히 무슨 상관이 있는지 모르겠습니다. 나는 함수에 javaScipt를 만들려고 시도하고 body 태그에 'onload'를 사용했다. (예 : 'onload = "myFunction"'). 실제로 그것은 트위터 중 일부가 작동을 멈추었으므로 조금 더 나 빠졌다. (실제 코드는 위의 예제보다 조금 복잡하다. 문제의 본질이기는하지만).그래서 제가 실제해야 할 일을 조금 더 자세하게 설명 할 수 있다면 좋을 것입니다. – labowhat

위의 편집을 참조하십시오. – JohnnyJS

@ JohnnyJS가 말했듯이, 글꼴을 사용하기 전에 글꼴을 완전히로드해야합니다.

wf.async='true'으로 설정하면 백그라운드에서 글꼴을 다운로드하는 동안 브라우저에서 Kinetic을 계속로드하도록 지시합니다.

따라서 글꼴을 사용할 수 있기 전에 운동 텍스트가 렌더링됩니다.

키네틱을 계속로드하기 전에 wf.async='false'을 설정하면 webfontJS가 글꼴로드를 기다릴 수 있습니다.

따라서 글꼴은 완전히로드되고 kinetic.text가 필요할 때 사용할 수 있습니다.

그러나 wf.async = 'false'인 경우 글꼴로드 중에 브라우저가 중지됩니다.

비동기를 사용하려는 경우 WebFontConfig에서 active 콜백을 정의해야합니다.

글꼴이 완전히로드 된 후 active 콜백이 트리거됩니다.

그래서이 콜백에 대한 응답으로 kinetic.text를 작성하기 시작했습니다. 폰트가 완전히 사용 가능하다는 것을 알았습니다.

출처

2013-08-25 19:43:17 markE

KineticJS를 사용할 때 Google 글꼴이로드되지 않습니다.

답변

관련 문제