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

Question

我想在 p5.js canvas 中制作一个紧贴我的文本的框 -- 这可以做到，但我只能通过加载新的字体进入程序。

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

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

例如，我不得不为下面的 "Code Snippet" 使用外部托管的 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>

Answer 1

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

无法使用 p5.js 从给定的浏览器中检索默认字体。
设置应用程序使用的字体无论如何都是一个好习惯，因为 "default" 对于不同的浏览器会有所不同。如果您在 MacOS 上编写 Processing 程序然后在 Windows 上运行它同样适用 - 默认字体将自动映射到给定平台可用的最合适的 "default" 字体.

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

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

Is there a way to put a box behind text in p5.js with the default font?

javascript

processing

fonts

opentype

p5.js