如何将交互式文本放入 p5.js canvas？

Question

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

Answer 1

P5的canvas就是一个canvas。（更具体地说是 <canvas> 元素的渲染上下文）。将其视为一张易于编辑的大图片。问题是，您不能 highlight/copy 图片中的文字。与 canvas 和 text() 相同。它只是将您作为图像提供的文本绘制到 canvas，因此不存在实际文本，只有一堆图像数据，显示时看起来像文本。您最好为此使用 createP() 或 createDiv()，这会创建浏览器可以 highlight/copy 的实际文本。只需将text('bla bla bla')替换为createP('bla bla bla')，然后使用css定位，更改字体，更改颜色。等等

Answer 2

See this code that I wrote for （不是重复的）（代码没有完全按照我下面所说的去做，但它会给出一般要点）

简单的回答：p5 的 text() 只是将文本绘制到 canvas。您需要使用 createP() 函数（或 createDiv）

示例代码：

let myPTag;

function setup() {
  createCanvas(400, 400);
  background(200);

  myPTag = createP("This here is some text");
  myPTag.position(200, 100);
}

Click here to see this code in action

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

如何将交互式文本放入 p5.js canvas？

How do you put interactive text in a p5.js canvas?

html

javascript

p5.js