Положение текста CreateJS / Canvas изменилось после обновления версии Chrome с 70 до 71

Question

Положение текста Createjs изменено после обновления версии Chrome с 70 до 71. Пожалуйста, помогите мне.

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), показывая лишь некоторые незначительные смещения при больших размерах шрифта

И, тем не менее, некоторые шрифты по-прежнему отстой (т. Е. Поппинс), но я подозреваю, что в этом случае это «ошибка» самого шрифта.

---

Надеюсь, @ lanny будетСкоро у нас есть официальное исправление в createjs, но нет никакой гарантии, когда это будет включено в Animate, к сожалению.

Answer 2

Просто пропатчил его (проверено только моей командой и шрифтом Open Sans), просто проверив текущий пользовательский агент и увеличив значение свойства count до 0.2 (просто протестировал его с логикой 1.2 * lineHeight иэто работает) вместо 0. По сути, он просто вытолкнет текст на 20% от свойства lineHeight.

Будьте осторожны, это не официальный патч, он работает для меня, но этоне проверено в бою.

Добавьте этот код в начале файла 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;

Конечно, яоткрыт для предложений и улучшений!:)

Спасибо!

Answer 3

Проблема может быть решена аналогичным образом путем переопределения «_drawTextLine» в том же классе Text.js, как описано здесь: https://forums.adobe.com/message/10845543#10845543.

Фактическая проблема с этой проблемой заключается в том, что разные шрифты classic, google или adobe (бывшая машинка) ведет себя по другому.Я ищу решение, которое бы нормализовало выравнивание шрифта независимо от его типа или природы.

См. Пример ниже.Браузер Chrome версии 71

Без исправления это

С исправлением _drawTextLine

Answer 4

Это преднамеренное изменение в Chrome, чтобы привести его в соответствие с «правильным» поведением (которое Firefox всегда имел). Вот дополнительная информация .Похоже, что Chrome 71 (и более поздние выпуски) наконец-то исправляет эту ошибку.

Единственное затронутое выравнивание - "top", которое является значением по умолчаниюВот быстрое сравнение между двумя версиями Chrome.

Мы рассматриваем встроенное решение в EaselJS, поскольку оно более эффективно, чем когда онобыл просто Firefox, который был выбросом.