Разница в поведении между Firefox и Chrome для операции fillRect HTML Canvas и fontBoundingBoxAscent
Я работаю над ошибкой в библиотеке для Leaflet и не могу понять, как обойти разницу в том, как Firefox и Chrome реализуют HTML Canvas. Он вращается вокруг функции ctx.fillRect — похоже, она не работает в Firefox. В Chrome приложение работает правильно, а метки имеют правильный цвет:
Хром
Однако с Firefox это выглядит так:
Фаерфокс
Код в моей библиотеке, который рисует метки:
drawLabel(labelText, textColor, backgroundColor, labelPosition) {
const textWidth = this.ctx.measureText(labelText).width;
const textHeight = this.ctx.measureText(labelText).fontBoundingBoxAscent;
// Calculate label xy position
const labelX = labelPosition.x;
const labelY = labelPosition.y;
this.ctx.fillStyle = backgroundColor;
// Magic numbers will centre the rectangle over the text
this.ctx.fillRect(labelX - textWidth / 2 - 1, labelY - textHeight + 1, textWidth + 3, textHeight + 2);
this.ctx.fillStyle = textColor;
this.ctx.fillText(labelText, labelX - textWidth / 2, labelY);
}
Я пытался использовать ctx.rect и ctx.fill в качестве замены, но это не сработало. Регистрация объекта ctx показала, что Chrome и Firefox реализуют контекст Canvas немного по-разному, но поля, которые я изменяю, не отличаются.
@sideshowbarker вместо [fontBoundingBoxAscent], если вы обнаружите «много» связанных вопросов, создайте более общее имя тега, например [textmetrics]. Вероятно, нам не нужен один тег для каждого свойства.
@Kaiido Хорошо, достаточно честно. Проблема, с которой я столкнулся с некоторыми механизмами мониторинга, над которыми я работал, заключается в том, что инструмент поиска SO не позволяет комбинировать несколько ключевых слов/фраз с помощью логического ИЛИ ー, тогда как он позволяет комбинировать несколько тегов с помощью логического ИЛИ.
Поэтому я надеюсь найти золотую середину для обхода ограничений в инструменте поиска SO без создания чрезмерного количества новых тегов, а также сделать имена тегов максимально доступными для людей, задающих вопросы. Любые предложения или рекомендации, которые у вас есть, будут высоко оценены.
@sideshowbarker Исправление инструмента поиска было бы очевидным, но я чувствую вашу боль. Я просто уверен, что добавление одного тега для каждого свойства интерфейса не является «хорошим делом».
Ответы 1
Проблема в том, что fontBoundingBoxAscent не включен в Firefox по умолчанию и требует, чтобы пользователь включил его в about:config под dom.textMetrics.fontBoundingBox.enabled.
И даже тогда помните, что результаты будут противоречивыми: github.com/web-platform-tests/interop/issues/159
Я подозреваю, что у вас проблема с
fontBoundingBoxAscent, который по умолчанию не включен в Firefox и требует измененияabout:config(dom.textMetrics.fontBoundingBox.enabled)