chrome 版本从 70 升级到 71 后 CreateJS/Canvas 文本位置发生变化

Posted 2023-02-18

【中文标题】chrome 版本从 70 升级到 71 后 CreateJS/Canvas 文本位置发生变化

【英文标题】：CreateJS/Canvas text position changed after chrome version upgrade from 70 to 71

【发布时间】：2019-05-26 07:17:28

【问题描述】：

chrome 版本从 70 升级到 71 后 Createjs 文本位置发生变化。请指导我。

【问题讨论】：

这里有同样的问题。我的所有作品都（严重）受到关注。你有什么解决办法吗？

【参考方案1】：

这是对 Chrome 的有意更改，以使其符合“正确”行为（Firefox 一直以来的行为）。 Here is more information。看起来 Chrome 71（及更高版本）最终解决了该错误。

唯一受影响的对齐方式是“顶部”，这是默认值。这是两个 Chrome 版本之间的快速比较。

我们正在考虑在 EaselJS 中使用内置解决方案，因为这比只有 Firefox 是异常值时更有影响力。

【参考方案2】：

只需通过对当前用户代理的简单检查并强制计数属性为 0.2 来修补它（仅使用我的团队和 Open Sans 字体进行测试）（只需考虑 1.2 * lineHeight 的逻辑对其进行测试，它就可以工作）而不是 0。基本上它只会将文本下推 lineHeight 属性的 20%。

小心，这不是官方补丁，它适用于我，但它没有经过实战测试。

在文件 src/easeljs/display/Text.js 开头添加这段代码（感谢is.js提供浏览器检测代码）：

var userAgent = (navigator && navigator.userAgent || "").toLowerCase();
var vendor = (navigator && navigator.vendor || "").toLowerCase();
var isChrome = /google inc/.test(vendor) ? userAgent.match(/(?:chrome|crios)\/(\d+)/) : null;

在第 348 行，替换下一行：

var maxW = 0, count = 0;

通过这个：

var maxW = 0, count = isChrome ? 0.2 : 0;

我当然愿意接受建议和改进！ :)

谢谢！

【参考方案3】：

同样可以通过在同一 Text.js 类中覆盖“_drawTextLine”来解决此问题，如下所述：https://forums.adobe.com/message/10845543#10845543。

这个问题的实际问题是不同的字体 classic、google 或 adobe（以前的 typekit）表现不同。我正在寻找一种无论字体类型或性质如何都能使字体对齐正常化的解决方案。

请参阅下面的示例。浏览器 Chrome 版本 71

没有修复它是

用 _drawTextLine 修复

【参考方案4】：

我不喜欢当前提出的解决方案（更改 lineHeight 或行数），因为它们对于不同的字体、样式和大小不太可靠......所以我推出了自己的解决方案：

var cache = 
createjs.Text.prototype._drawTextLine = function (ctx, text, y) 
    this.textBaseline = ctx.textBaseline = "alphabetic";
    if (!(this.font in cache)) 
        var metrics = this.getMetrics();
        cache[this.font] = metrics.vOffset;
    
    var offset = cache[this.font];
    if (this.outline) 
        ctx.strokeText(text, 0, y - offset, this.maxWidth || 0xFFFF);
     else 
        ctx.fillText(text, 0, y - offset, this.maxWidth || 0xFFFF);
    
;

textBaseline 的alphabetic 值是最可靠的跨浏览器，并且通常是当今的标准。

当它同时设置为 Text 实例和 CanvasRenderingContext2D 时，我们可以调用 getMetrics 并拥有 vOffset从它的边界框顶部到其基线的字体。

将该偏移量应用于 fillText 调用，您通常会获得不错的字体渲染。缓存可以很好地避免在每一帧上重新测量相同字体的度量。

从我到目前为止运行的（有限数量的）测试来看，它似乎是：

相当稳定的跨浏览器 注重性能 非常接近预期的字体渲染（如在 Animate 中所见），在高字体大小下仅显示了一些小偏移

然而，有些字体仍然很糟糕（即 Poppins），但我怀疑在这种情况下这是字体本身的“错误”。

---

希望 @lanny 很快会在 createjs 中得到官方修复，但遗憾的是，无法保证何时将其包含在 Animate 中。

【讨论】：

这太棒了！下周我可以考虑整合它。

很好，谢谢。你们可能可以比我更好地整合这种方式。必须将它与 Animate 一起使用，我必须找到一个最小的猴子补丁以从“外部”应用；）