Question

Chrome版本从70升级到71后，Createjs文本位置发生了变化。

Answer 1

我不喜欢当前提出的解决方案（更改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 的字母值是最可靠的跨浏览器，并且通常是当今的标准浏览器。

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

将该偏移量应用于fillText调用，通常可以得到不错的字体呈现。缓存是一种很好的措施，可以避免在每个帧上重新测量相同字体的度量。

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

非常稳定的跨浏览器
注重表现
非常接近预期的字体渲染效果（如Animate中所示），在高字体大小下仅显示一些较小的偏移量

但是，某些字体仍然很烂（例如Poppins），但在这种情况下，我怀疑这是字体本身的“错误”。

希望@lanny很快将在createjs中得到正式修复，但不能保证何时将其包含在Animate中。

Answer 2

这是Chrome中的一项有意更改，旨在使其与“正确”行为（Firefox一直以来都如此）保持一致。 Here is more information。看来Chrome 71（及更高版本）终于解决了该错误。

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

我们正在考虑EaselJS中的内置解决方案，因为它比离群的Firefox更具影响力。

Answer 3

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

此问题的实际问题是经典，谷歌或adobe（以前的typekit）的不同字体表现不同。我正在寻找一种解决方案，无论其类型或性质如何，都可以规范字体对齐方式。

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

没有修复

使用_drawTextLine修复

Answer 4

只需通过对当前用户代理的简单检查并将其count属性强制为0.2来修补它（仅在我的团队和Open Sans字体下进行了测试）（将其牢记为1.2 * lineHeight的逻辑对其进行了测试，并且可以正常工作）而不是0。基本上，它只会将文本下移lineHeight属性的20％。

请注意，这不是一个官方补丁，它对我有用，但尚未经过战斗测试。

在文件src / easeljs / display / Text.js的开头添加此代码（感谢nesting the loops用于浏览器检测代码）：

area.Column

在第348行，替换下一行：

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

通过这个：

var maxW = 0, count = 0;

我当然可以提出建议和建议！：）

谢谢！

chrome版本从70升级到71后，CreateJS / Canvas文本位置已更改

4 个答案: