iPhone上的面料js畫布文本問題

Question

我已經開發了一個網站，可以使用面料JS和Magento社區版本上的淘汰JS進行自定義的邀請。該邀請產品在Android和所有Windows/Mac版本瀏覽器上運行良好，但不在iPhone上。只要所有的字體在iPhone上加載文本被破壞在多行，重疊和錯位。

網站網址和產品URL（點擊個性化按鈕）： - http://candlebark.testingdemo.net/wedding-invitations/anchoredinloveweddinginvitation.html 彈出U /病人： - 檢驗/試驗@ 123

同樣的產品網址正在開發iPhone模擬器和瀏覽器堆棧的罰款。

Answer 1

看來，我們有完全一樣的問題：

• 錯位文本
• 奇怪的ASCII-圖標代替文本在iPhone上

我不知道這已經是固定的目前我們的2.X版本與FabricJS 1.6.2一起工作，並且不能僅僅替換我們產品背後的主體框架，所以我不得不找出發生了什麼並找到了這個問題：

以下問題僅發生在Safari for MAC and iPhone，所有其他瀏覽器均正常工作：

產品編輯器將預定義的複雜JSON文件加載到畫布中，然後初始化所有其他功能。

問題1：放錯了位置的文本

在我們的情況下，不是文本只是放錯了地方，其實同時再次導出畫布JSON時，在iText的對象的「寬度」得到了改變。

經過一番研究和實驗，我發現編輯模式下的character-width被錯誤計算，這使得整個ITEXT-Object在加載後變大。

---

而這也是整個事情的原因：It seems that Safari loads, renders the web-fonts slightly different, which messed up the calculation for FABRICJS.

在我們的情況下，解決辦法很簡單：

1. 我創建了檢查當前的函數瀏覽器。
2. 然後，一個禁用字體預加載和Safari初始化的函數。

現在編輯器再次加載一切正常，只有目標字體丟失。

當所有被加載和初始化，只有一個AJAX的呼叫的字體報頭（預壓）和字體頁腳（初始化）在Safari再次追加。

它在最後一個canvas.renderAll();發生輕微超時，我們的產品動機再次看起來不同（在不同的瀏覽器上）。

---

問題2：奇怪的ASCII-圖標

的MAC Safari瀏覽器沒有過這樣的問題，但在iPhone上出現了有時這些奇怪的ASCII碼圖標，如在你的截圖中。但在我的情況下，只有目標字體沒有完全加載，畫布纔會呈現。 （canvas.renderAll();）

---

希望有所幫助，祝你好運！