在畫布中使用CSS字體與Angular 2不兼容

我在Angular 2中製作了一個應用程序，該應用程序必須使用用戶設置的一些參數生成圖像。我認爲這樣做的好主意可以是畫布（畫布允許保存生成的圖像，我需要在社交網絡中分享）。在畫布中使用CSS字體與Angular 2不兼容

這個參數必須用自定義字體填充（我有.otf文件）。

我創建了一個角2組件，顯示圖像與組件的屬性帆布這樣

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

我的組件的CSS包含此代碼：

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

當ngOnInit致電fillTextInCanvas()，我與調試檢查，font值"48pt DINProCond"，並設置好的this.canvasContext.font是"64px DINProCond"（可能計算尺寸PX？）

我的問題是填充畫布文本「畫」沒有選擇的字體（顏色就OK了，但字體是瀏覽器默認的）。我嘗試在全局CSS和組件CSS中加載字體，但沒有任何結果。

可以在可以加載字體之前繪製文本？我的代碼中有任何錯誤？任何想法？謝謝！！

來源

2017-01-03 Ivan Montilla

通常在加載字體之前會觸發加載頁面（您需要注意窗口加載的事件），並且即使稍後可用，也會導致字體默認值。我對角度不熟悉，但這是我之前在畫布中呈現字體時遇到的問題。 – somethinghere

我認爲我在裝入字體之前在畫布上繪製文字，但我不確定，如果是這種情況，我該如何修復它？謝謝 –

最簡單的方法是延遲代碼的執行，直到'window.load'，當所有相關資源都被提取並準備就緒時觸發。有一種方法可以專門加載字體，但沒有很好的支持，我沒有真正的答案。 – somethinghere

Kaiido的評論解決了這個問題。我試圖在畫布上填充文本，但字體未被下載。

將字體設置爲畫布內容不會下載字體，首先需要DOM中的某些元素通過CSS使用字體。

我解決了它把我的HTML一<span id="load-fonts">Text</span>並通過CSS表明這個跨度使用字體。

注意：該元素必須包含一些文本。

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

來源

2017-01-05 10:28:18

在畫布中使用CSS字體與Angular 2不兼容

回答

相關問題