javascript - 有没有办法在 p5.js 中使用默认字体在文本后面放置一个框？

Question

我想在 p5.js Canvas 中制作一个紧密贴合文本的框——这是可以做到的，但我只能通过将新字体加载到程序中来弄清楚如何做到这一点。

可以使用默认字体在文本后面创建一个紧密的框，从而避免加载新字体吗？

进一步说明
要在 Canvas 上的某些文本周围获得一个紧密的框，可以使用 textBounds() 方法来获取文本的边界。您将获得与文本紧密贴合的框 Angular 的位置。现在，在 http://p5js.org/reference/#/p5.Font/textBounds 中找到的 p5.js 示例中我在下面放入了代码片段，看来您必须在使用textBounds()之前使用loadFont()加载字体来获取包含文本的框的边界。我的问题是，在不加载字体而仅使用默认字体的情况下，这是如何完成的？

例如，我必须为下面的“代码片段”使用外部托管的谷歌字体。 我宁愿在默认字体后面放一个框，以避免加载某些字体。

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>

Answer 1

根据设计，必须在定义字体后调用 p5.Font.textBounds() - 您将在 p5.Font 类的许多其他方法中看到相同的情况，例如textToPoints()。这是有原因的 -

1. 无法使用 p5.js 从给定浏览器检索默认字体。
2. 无论如何，设置应用程序使用的字体是一个很好的做法，因为不同浏览器的“默认”字体会有所不同。如果您在 MacOS 上编写处理程序，然后在 Windows 上运行它，同样适用 - 默认字体将自动映射到给定平台上最合适的“默认”字体。

TL;DR - 不，不定义字体就无法运行 textBounds()。