如何将交互式文本放入 p5.js 画布中？

Question

我正在尝试将交互式文本放入 p5.js 画布中，但不知道如何操作。交互式文本是指您可以突出显示和复制的文本，就像任何 HTML 网站上的文本一样。有没有办法做到这一点？如果不是，那么编写使用交互式文本以及 p5.js 中的元素的应用程序的最佳框架是什么？

Answer 1

P5 的画布就是画布。（更具体地说是<canvas>元素的渲染上下文）。将其视为一张易于编辑的大图片。问题是，您无法在图片中正确突出显示/复制文本。与 canvas 和text(). 它只是将您作为图像提供的文本绘制到画布上，因此不存在实际文本，只有一堆图像数据，显示时看起来像文本。您最好使用createP()orcreateDiv()来创建浏览器可以突出显示/复制的实际文本。只需替换text('bla bla bla')为createP('bla bla bla')，然后使用 css 对其进行定位，更改字体，更改颜色。ETC。

Answer 2

简单的答案：p5text()只是在画布上绘制文本。您需要使用createP()函数（或 createDiv）

示例代码：

let myPTag;

function setup() {

  createCanvas(400, 400);

  background(200);

  myPTag = createP("This here is some text");

  myPTag.position(200, 100);

}

您不需要为此使用自己的 CSS，只需使用该<element>.position(posX, posY);函数即可。要更改文本的值，只需使用<element>.html(newTextString);