Есть ли способ поместить поле позади текста в p5.js с шрифтом по умолчанию? - PullRequest
Новая
       27

Есть ли способ поместить поле позади текста в p5.js с шрифтом по умолчанию?

0 голосов
/ 08 июля 2019

Я хочу создать рамку, которая будет плотно прилегать к моему тексту на холсте p5.js - это можно сделать, но я могу понять, как это сделать, загрузив новый шрифт в программу.

Можно ли создать плотную рамку за текстом со шрифтом по умолчанию, чтобы избежать необходимости загружать новый шрифт?

Дальнейшее объяснение
Чтобы получить плотную рамку вокруг текста на холсте, можно использовать метод textBounds(), чтобы получить границы текста. Вы получите положение углов поля, которое плотно облегает ваш текст. Теперь в примере p5.js, найденном в http://p5js.org/reference/#/p5.Font/textBounds, который я поместил в фрагмент кода ниже, кажется, что необходимо загрузить шрифт с помощью loadFont(), прежде чем использовать textBounds() для получить границы поля, содержащего текст. У меня вопрос, как это сделать без загрузки шрифта и просто используя шрифт по умолчанию?

Например, мне пришлось использовать шрифт Google с внешним размещением для «Фрагмента кода» ниже. Я бы предпочел просто поставить рамку за шрифтом по умолчанию, чтобы избежать необходимости загружать какой-либо шрифт. 

let font;
let textString = 'Lorem ipsum dolor sit amet.';

function preload() {
  font = loadFont('https://raw.githubusercontent.com/google/fonts/master/ofl/alikeangular/AlikeAngular-Regular.ttf');
}

function setup() {
  background(210);

  let bbox = font.textBounds(textString, 10, 30, 12);
  fill(255);
  stroke(0);
  rect(bbox.x, bbox.y, bbox.w, bbox.h);
  fill(0);
  noStroke();

  textFont(font);
  textSize(12);
  text(textString, 10, 30);
}
<script src="https://cdn.jsdelivr.net/npm/p5@0.9.0/lib/p5.min.js"></script>

1 Ответ

2 голосов
/ 08 июля 2019

По замыслу p5.Font.textBounds() нужно будет вызывать после определения шрифта - вы увидите то же самое со многими другими методами класса p5.Font, например, textToPoints().Для этого есть причина -

  1. Нет способа извлечь шрифт по умолчанию из данного браузера, используя p5.js.
  2. В любом случае, рекомендуется установить шрифт, который вы используете для своего приложения, поскольку «default» будет отличаться для разных браузеров.То же самое применимо, если вы пишете программу обработки в MacOS, а затем запускаете ее в Windows - шрифт по умолчанию автоматически сопоставляется с наиболее подходящим шрифтом «по умолчанию», доступным на данной платформе.

TL; DR - нет, нет способа запустить textBounds() без определения шрифта.

...