Web 文本渲染颜色异常

[0x1306a94]

我参照 libpag 的web实现为我的代码添加了web渲染支持，然后发现在web 上渲染的文本颜色是白色。

我通过日志确定了我设置的文本颜色就是黑色
https://github.com/0x1306a94/SeatCanvas/blob/feature/0x1306a94_web_platform/src/SeatCanvas/core/svg/ConvertSVGLayer.cpp#L246

可以通过 https://preview.seatcanvas-demo.pages.dev 预览，也可以直接本地运行 https://github.com/0x1306a94/SeatCanvas/blob/feature/0x1306a94_web_platform 这个分支的代码

缩放移动时偶尔还会出现这样子，黑块的地方就是文本。但是同样的代码 在iOS Android 鸿蒙平台都是正常的。我在tgfx的源码里也没找到具体的原因

[Hparty]

好，我们跟进看下

[0x1306a94]

@Hparty 我找到原因了，是因为我默认回退字体时。把 emoji 这个放到了第一个。我是从 tgfx/web/src/utils/font-family.ts 拷贝的。
但是在web 的hello 2d 中是手动注册的先注册的 NotoSansSC-Regular.otf

然后我把 emoji 放到最后重新编译运行就对了，也让 AI 分析了一下

[0x1306a94]

不过在缩放的时候还是有点异常

[Hparty]

确实，单线程版本复现了这个问题。我看下

[Hparty]

找到原因了，WebScalerContext这边浏览器对最大画布有限制，导致文字在放大的时候获取bounds有问题，最后文字被clip了，我们修复下

[0x1306a94]

👌

[Hparty]

已经在#1473 修复

[0x1306a94]

更新后可以了

[0x1306a94]

我发现通过动画执行缩放时web 平台文本渲染会导致掉帧。
然后我启用FreeType 替换掉默认的 WebTypeface 就好了。

WebTypeface 的方案在动画驱动这种高频调用下掉帧应该是 c++ -> js canvas 来回开销导致的吧？

[Hparty]

不全是，Canvas2D各种操作也比较重。在缩放场景下，缓存经常会重建，所以性能会差一些。如果是同一个scale，两边差距就不会这么大了

[0x1306a94]

嗯呢。不过我启用FreeType 后明显好了很多