iPhone上的Fabric JS Canvas文本问题

Question

我已经在Magento社区版本上使用Fabric JS和淘汰赛JS开发了一个用于自定义邀请的网站。 邀请产品可以在Android和所有Windows / Mac版本的浏览器上正常运行，但不能在iPhone上运行。 一旦所有字体都加载到iPhone上，文本就会被多行折断，重叠和放错位置。

网站URL和产品URL（单击个性化按钮）：-http: //candlebark.testingdemo.net/wedding-invitations/anchoredinloveweddinginvitation.html弹出式视窗：-test / test @ 123

相同的产品URL在iPhone模拟器和浏览器堆栈上都可以正常工作。

Answer 1

看来我们有完全一样的问题：

• 文字错误
• 奇怪的ASCII图标而不是iPhone上的文本

我不知道在我们使用FabricJS 1.6.2的情况下当前的2.X版本中是否已解决此问题，并且无法仅替换产品背后的主要框架，所以我必须找出问题所在。发生并找到这个：

以下问题仅发生在Safari for MAC and iPhone ，其他所有浏览器均正常运行：

产品编辑器将预定义的复杂JSON文件加载到画布中，然后初始化其所有其他功能。

问题1：放错位置的文字

在我们的例子中，并不是仅将文本放错了位置，实际上，在再次将Canvas导出为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的字体预加载和初始化。

现在，编辑器再次加载一切正常，仅缺少目标字体。

3. 加载并初始化所有文件后，只有AJAX调用才会再次在Safari中追加Font-Header（预加载）和Font-Footer（Init）。

4. 最后触发canvas.renderAll(); 稍有超时，并且我们的产品动机再次相同（在不同的浏览器上）。

---

问题2：奇怪的ASCII图标

MAC Safari并没有这个问题，但是在iPhone上，有时您的屏幕截图中会出现这些奇怪的ASCII图标。 但是在我的情况下，仅在目标字体未完全加载且画布被渲染的情况下。 （ canvas.renderAll(); ）

---

希望对您有帮助，祝您好运！