Nano Hash - криптовалюты, майнинг, программирование

Как определить точную ширину fillRect() на основе ширины fillText()?

Я попробовал этот код ниже..

var text = "Sample Text";
var b1 = "Bold";
var txtContext = txtCanvas.getContext("2d");
var width = txtContext.measureText(text).width;

txtContext.fillStyle = "blue";
txtContext.fillRect(0, 0, width * 9.7, height);

txtContext.textBaseline = "middle";
txtContext.fillStyle = 'gray';
txtContext.font = b1 + "90px Arial";
txtContext.fillText(text, 10, 50);

Я хочу, чтобы синий фон соответствовал тексту. В некоторых сценариях это кажется нормальным, но проблема в том, что текст динамически меняется, и синий фон иногда бывает коротким, когда я делал текст всего из 1-4 маленьких символов, а когда я делал его длинным и заглавными, синий фон становится слишком длинным. Я хочу, чтобы он был подходящим и имел хотя бы небольшие отступы в начале и конце текста. P.S. Размер текстового шрифта и семейство шрифтов фиксированы и составляют 90 пикселей Arial, но «полужирный» будет.

javascript html5-canvas
11.07.2019

Ответы:


1

Основная идея состоит в том, чтобы измерить текст перед заполнением прямоугольника. Затем вы заполняете прямоугольник, используя ширину текста, и, наконец, вы заполняете текст. Я надеюсь, что это помогает.

Наблюдение: вам может потребоваться сбросить ширину холста, если она меньше, чем необходимо. Вы можете сделать это после заполнения прямоугольника и текста.

// set the canvas width
txtCanvas.width = window.innerWidth;
//and the context
var txtContext = txtCanvas.getContext("2d");


var text = "Sample Text";
var b1 = "bold";
txtContext.textBaseline = "middle";
txtContext.font = b1 + " 90px arial";

//measure the text before filling it
var width = txtContext.measureText(text).width;
//fill the rect using the width of the text
txtContext.fillStyle = "blue";
txtContext.fillRect(0, 0, width + 20, 100);// + 20 since the text begins at 10
//fill the text
txtContext.fillStyle = 'gray';
txtContext.fillText(text, 10, 50);
<canvas id="txtCanvas"></canvas>

11.07.2019
  • Спасибо, этот ответ именно то, что я искал. 12.07.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..