Разница в поведении между Firefox и Chrome для операции fillRect HTML Canvas и fontBoundingBoxAscent

Я работаю над ошибкой в ​​​​библиотеке для Leaflet и не могу понять, как обойти разницу в том, как Firefox и Chrome реализуют HTML Canvas. Он вращается вокруг функции ctx.fillRect — похоже, она не работает в Firefox. В Chrome приложение работает правильно, а метки имеют правильный цвет:

Хром
Разница в поведении между Firefox и Chrome для операции fillRect HTML Canvas и fontBoundingBoxAscent

Однако с Firefox это выглядит так:

Фаерфокс
Разница в поведении между Firefox и Chrome для операции fillRect HTML Canvas и fontBoundingBoxAscent

Код в моей библиотеке, который рисует метки:

  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 немного по-разному, но поля, которые я изменяю, не отличаются.

Я подозреваю, что у вас проблема с fontBoundingBoxAscent, который по умолчанию не включен в Firefox и требует изменения about:config (dom.textMetrics.fontBoundingBox.enabled)

Zac Anger 20.11.2022 04:38

@sideshowbarker вместо [fontBoundingBoxAscent], если вы обнаружите «много» связанных вопросов, создайте более общее имя тега, например [textmetrics]. Вероятно, нам не нужен один тег для каждого свойства.

Kaiido 21.11.2022 00:38

@Kaiido Хорошо, достаточно честно. Проблема, с которой я столкнулся с некоторыми механизмами мониторинга, над которыми я работал, заключается в том, что инструмент поиска SO не позволяет комбинировать несколько ключевых слов/фраз с помощью логического ИЛИ ー, тогда как он позволяет комбинировать несколько тегов с помощью логического ИЛИ.

sideshowbarker 21.11.2022 01:25

Поэтому я надеюсь найти золотую середину для обхода ограничений в инструменте поиска SO без создания чрезмерного количества новых тегов, а также сделать имена тегов максимально доступными для людей, задающих вопросы. Любые предложения или рекомендации, которые у вас есть, будут высоко оценены.

sideshowbarker 21.11.2022 01:29

@sideshowbarker Исправление инструмента поиска было бы очевидным, но я чувствую вашу боль. Я просто уверен, что добавление одного тега для каждого свойства интерфейса не является «хорошим делом».

Kaiido 21.11.2022 01:36
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
1
5
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что fontBoundingBoxAscent не включен в Firefox по умолчанию и требует, чтобы пользователь включил его в about:config под dom.textMetrics.fontBoundingBox.enabled.

И даже тогда помните, что результаты будут противоречивыми: github.com/web-platform-tests/interop/issues/159

Kaiido 21.11.2022 00:42

Другие вопросы по теме