キャンバスのCSSフォントをAngular 2で使用していない

Question

私はAngular 2でアプリケーションを作成していますが、ユーザーが設定したいくつかのパラメータを使用して画像を生成する必要があります。私はこれを行うための良いアイデアはキャンバスにすることができたと思った（キャンバスは画像を保存することができ、ソーシャルネットワークで共有する必要がある）。

このパラメータは、カスタムフォント（.otfファイル）でイメージに入力する必要があります。

私はこの

<app-card [cardStyle]="0" [PAC]="91"></app-card> 

私のコンポーネントのCSSのような構成要素の属性でキャンバスに画像を表示角度2コンポーネントを作成し、このコード含まれています

@font-face { 
    font-family: 'DINProCond'; 
    src: url('/assets/fonts/DINPro-Cond.otf') format("opentype"); 
} 

@font-face { 
    font-family: 'DINProCondBold'; 
    src: url('/assets/fonts/DINPro-CondBold.otf') format("opentype"); 
} 

@font-face { 
    font-family: 'DINProBold'; 
    src: url('/assets/fonts/DINPro-Bold.otf') format("opentype"); 
} 

とコンポーネントクラスを：

//Class header and other properties 
    private canvasContext: CanvasRenderingContext2D; 

    @ViewChild("canvas") canvas: ElementRef; 

    @Input() cardStyle: number; 
    @Input() general: number; 
    @Input() position: string; 
    @Input() PAC: number; 
    @Input() SHO: number; 
    @Input() PAS: number; 
    @Input() DRI: number; 
    @Input() DEF: number; 
    @Input() PHY: number; 

    constructor() {} 

    /** 
    * This method is called when component is initialized. 
    */ 
    ngOnInit() { 
    this.canvasContext = this.canvas.nativeElement.getContext('2d'); 
    let self: CardComponent = this; 

    let context: CanvasRenderingContext2D = this.canvasContext; 
    let cardImage: HTMLImageElement = new Image(); 
    cardImage.onload = function() { 
     context.drawImage(this, 0, 0); 
     context.font = self.getFont(self.ZONE_GENERAL); 
     self.fillTextInCanvas("PAC", 150, 700, self.getFont(self.ZONE_GENERAL), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas(self.PAC.toString(), 50, 700, self.getFont(self.ZONE_GENERAL_VALUES), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas("SHO", 150, 790, self.getFont(self.ZONE_GENERAL), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas(self.SHO.toString(), 50, 790, self.getFont(self.ZONE_GENERAL_VALUES), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas("PAS", 150, 870, self.getFont(self.ZONE_GENERAL), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas(self.PAS.toString(), 50, 870, self.getFont(self.ZONE_GENERAL_VALUES), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas("DRI", 480, 700, self.getFont(self.ZONE_GENERAL), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas(self.DRI.toString(), 380, 700, self.getFont("w"), self.getFontColor(self.ZONE_GENERAL_VALUES)); 
     self.fillTextInCanvas("DEF", 480, 790, self.getFont(self.ZONE_GENERAL), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas(self.DEF.toString(), 380, 790, self.getFont("w"), self.getFontColor(self.ZONE_GENERAL_VALUES)); 
     self.fillTextInCanvas("PHY", 480, 870, self.getFont(self.ZONE_GENERAL), self.getFontColor(self.ZONE_GENERAL)); 
     self.fillTextInCanvas(self.PHY.toString(), 380, 870, self.getFont("w"), self.getFontColor(self.ZONE_GENERAL_VALUES)); 
    }; 
    cardImage.src = "assets/cards/" + this.cardStyle + ".png"; 
    } 

    /** 
    * Get color of font depending of card type selected. 
    * 
    * @returns {string} 
    */ 
    private getFontColor(zone: string): string { 
    return "red"; //TODO 
    } 

    /** 
    * Fill text in canvas 
    * 
    * @param {string} text 
    * @param {number} x 
    * @param {number} y 
    * @param {string} font 
    * @param {string} color 
    * @param {CanvasRenderingContext2D} context 
    */ 
    private fillTextInCanvas(text: string, x: number, y: number, font: string, color: string) { 
    this.canvasContext.font = font; 
    this.canvasContext.fillStyle = color; 
    this.canvasContext.save(); 
    this.canvasContext.fillText(text, x, y); 
    this.canvasContext.restore(); 
    } 

でが、私は、デバッガでチェックfont値が"48pt DINProCond"で、this.canvasContext.fontをsetted（PXにたぶん、計算されたサイズ？）

私の問題は、キャンバスに満たされたテキストを選択したフォント（色はOKである、なしに「塗装」ですフォントはブラウザのデフォルトです）。私はグローバルCSSとコンポーネントCSSにフォントをロードしようとしましたが、結果はありませんでした。

多分フォントを読み込む前にテキストをペイントすることはできますか？私のコードで間違っていますか？何か案が？ありがとうございます！！

Answer 1

問題が解消されました。キャンバスにテキストを入力しようとしましたが、フォントはダウンロードされません。

フォントをキャンバスコンテンツに設定すると、フォントがダウンロードされません。まず、CSSを使用してフォントを使用するDOMの要素が必要です。

私はそれを私のHTMLの<span id="load-fonts">Text</span>に入れて解決し、このスパンを使ってこのスパンを使って示します。

注：：要素にはテキストが含まれている必要があります。

#load-font { 
    font-family: "DinProCond"; 
}