我正在處理 Leaflet 庫中的一個錯誤，我無法弄清楚如何解決 Firefox 和 Chrome 在實作 HTML Canvas 的方式上的差異。它圍繞著 ctx.fillRect 函式——它似乎在 Firefox 中不起作用。在 Chrome 上，應用程式正常運行并且標簽顏色正確：
鉻合金
然而，對于 Firefox，它看起來是這樣的：
火狐
我的庫中繪制標簽的代碼是：
drawLabel(labelText, textColor, backgroundColor, labelPosition) {
const textWidth = this.ctx.measureText(labelText).width;
const textHeight = this.ctx.measureText(labelText).fontBoundingBoxAscent;
// Calculate label xy position
const labelX = labelPosition.x;
const labelY = labelPosition.y;
this.ctx.fillStyle = backgroundColor;
// Magic numbers will centre the rectangle over the text
this.ctx.fillRect(labelX - textWidth / 2 - 1, labelY - textHeight 1, textWidth 3, textHeight 2);
this.ctx.fillStyle = textColor;
this.ctx.fillText(labelText, labelX - textWidth / 2, labelY);
}
我試圖利用 ctx.rect 和 ctx.fill 作為替代，但這不起作用。記錄 ctx 物件確實表明 Chrome 和 Firefox 對 Canvas 背景關系的實作略有不同，但我正在修改的欄位似乎沒有什么不同。
uj5u.com熱心網友回復：
問題是fontBoundingBoxAscentFirefox 默認不啟用，需要用戶about:config在dom.textMetrics.fontBoundingBox.enabled.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/537775.html
上一篇：為卡片記憶游戲制作提示按鈕