9

私は Fabric JS を使用して大きなカスタム アプリケーションに取り組んでおり、すでに素晴らしい仕事をしています。しかし、Web フォントを使用する init ロード テキスト オブジェクトに問題があります。

そのフォントがクライアントのコンピューターでローカルである限り、問題なく動作します。それ以外の場合、Web フォントは読み込まれず、キャンバス上のテキスト オブジェクトはデフォルトのサンセリフ フォント ファミリでレンダリングされます。

要するに、私がやっていることは次のとおりです（この例では、「allstar」をWebフォントとして使用しています）：

CSS: css は、fabric.js の前の head の fonts.css 内にロードされます。

@font-face{
    font-family:'allstar';
    src:
        url('/path-to-fonts/all_star-webfont.eot');
    src:
        url('/path-to-fonts/all_star-webfont.eot?#iefix') format('embedded-opentype'),
        url('/path-to-fonts/all_star-webfont.woff') format('woff'),
        url('/path-to-fonts/all_star-webfont.ttf') format('truetype'),
        url('/path-to-fonts/all_star-webfont.svg#allstarregular') format('svg');
    font-weight:normal;
    font-style:normal
}

Javascript: これは $(document).ready(function(){}) 内のページの下部にロードされます

var textSample = new fabric.Text(text, {
    fontFamily: "allstar",
});
canvas.add(textSample);
canvas.renderAll();

ページの他の場所でフォントを使用すると (例: ドットとフォントがロードされた透明なスパン タグで)、正常に動作します。しかし、それは適切なコーディング方法ではないと思います。

fabric.js バージョン 1.3.0 を使用します

4

6 に答える 6

4

問題：

  1. キャンバスはすぐにレンダリングされます
  2. Google が Web フォントを読み込む
  3. キャンバスは、それを再レンダリングする次のイベントまでわかりません

ソリューション：

  1. キャンバスはすぐにレンダリングされます
  2. Google はコールバックで Web フォントを読み込みます
  3. レンダリングを強制します
  4. キャンバスには、

http://jsfiddle.net/vvL6f/6/

WebFontConfig = {
    google: { families: [ 'Ribeye::latin', 'Lora::latin', 'Croissant+One::latin', 'Emblema+One::latin', 'Graduate::latin', 'Hammersmith+One::latin', 'Oswald::latin', 'Oxygen::latin', 'Krona+One::latin', 'Indie+Flower::latin', 'Courgette::latin', 'Ranchers::latin' ] }
};

(function() {
    var src = ('https:' === document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

    $.getScript(src, function(data) {      
        // Not sure why I need to run this twice but it makes it load the font and then reposition the font to it's correct coords.
        canvas.renderAll();
        canvas.renderAll();
    });
})();
于 2014-01-23T02:40:37.957 に答える
2

近道：

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
            google: {
                families: [ 'Abel', 'Aclonica']
            },
            fontinactive: function(familyName, fvd) {
                console.log("Sorry " + familyName + " font family can't be loaded at the moment. Retry later.");
            },
            active: function() {
                // do some stuff with font   
                $('#stuff').attr('style', "font-family:'Abel'");
                var text = new fabric.Text("Text Here", {
                    left: 200,
                    top: 30,
                    fontFamily: 'Abel',
                    fill: '#000',
                    fontSize: 60
                });

                canvas.add(text);
            }
        });
</script>

長い道のりWeb フォントはいつ読み込まれますか? また、事前に読み込むことができますか?

Web フォント ローダーの詳細https://github.com/typekit/webfontloader。

固有のhttps://groups.google.com/forum/#!topic/fabricjs/sV_9xanu6Bg

于 2014-02-28T00:24:53.083 に答える
1

fabric.js と Google Web Fonts を使用すると、次のコードが機能します。

フィドル: http://jsfiddle.net/DanBrown180/vvL6f/

CSS

<Style>
@font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: local('Jolly Lodger'), local('JollyLodger'),
url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
<style>

Javascript

<script type = "text/javascript">
canvas = new fabric.Canvas('c'); 
var text = new fabric.Text("Web Font Example", {
                    left: 200,
                    top: 30,
                    fontFamily: 'Jolly Lodger',
                    fill: '#000',
                    fontSize: 60
                });

canvas.add(text);
</script>

HTML

<canvas id="c" height="200px" width="400px"></canvas>

Google Web Fonts の css コードが以下を使用しているためのようです。

src: local('Jolly Lodger'), local('JollyLodger')

CSSで

于 2013-11-12T11:26:57.390 に答える
1

私も同じ問題を抱えていました。イベントが発生した後、フォントは正しくレンダリングされます。したがって、オブジェクトを作成した後、オブジェクトをアクティブに設定できます。

var textSample = new fabric.Text(text, {
    fontFamily: "allstar",
});
canvas.add(textSample);
canvas.setActiveObject(textSample); // Selects the object
canvas.renderAll();
于 2013-11-22T14:27:57.780 に答える
0

最善の方法は setTimeout(); を使用することです。

setTimeout(function(){
    var activeObject = canvas.getActiveObject();
    activeObject.set({
        fontFamily: font,
        useNative: true
    });
canvas.renderAll();},500);

jsfiddleを確認してください

http://jsfiddle.net/muthupandiant/x3ptsgex/1/

于 2015-02-03T07:31:12.883 に答える