Question

我想在p5.js画布上制作一个紧密适合我的文字的框-可以做到，但是我只能通过在程序中加载新字体来弄清楚该怎么做。

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

进一步的解释
为了在画布上的某些文本周围找到一个紧密的框，可以使用textBounds()方法来获取文本的边界。您将获得紧紧围绕文本的框角的位置。现在，在http://p5js.org/reference/#/p5.Font/textBounds的p5.js示例中，我已在下面的代码段中添加了该代码，看来您必须使用loadFont()加载字体，然后再使用{{ 1}}，以获取包含文本的框的边界。我的问题是，如何在不加载字体而仅使用默认字体的情况下完成此操作？

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

textBounds()

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);
}

Answer 1

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

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

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

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

1 个答案: