p5.js调用textToPoints生成点集时如何实现文本可编辑？

你的关联思路是完全正确的，只需要修复2个小问题即可正常运行：

• 初始状态下hiArray为undefined，页面刚加载时draw()函数遍历它会触发JS报错，需要给它设置初始空值
• 输入框的位置偏移超出了画布范围，需要调整坐标避免找不到输入框

修正后的完整代码 #

let font;
let hiArray = []; // 初始化空数组，避免初始报错
let size = 100;
let inp;

function preload() {
  // 注意替换为你自己的字体文件路径
  font = loadFont("brangus.otf");
}

function setup() {
  createCanvas(600, 400);
  inp = createInput('测试文本'); // 设置默认输入值，初始就有效果
  inp.position(20, 320); // 调整位置到画布下方可视区域
  inp.size(400);
  inp.input(inputChange);
  // 初始生成默认文本的点集
  hiArray = font.textToPoints(inp.value(), 60, 200, size);

  textFont(font);
  textSize(size);
  noStroke();
  fill(255, 104, 204);
}

function inputChange() {  
  hiArray = font.textToPoints(inp.value(), 60, 200, size);
}

function draw() {
  background(220);
  // 遍历点集绘制圆点
  for (let i = 0; i < hiArray.length; i++) {
    ellipse(hiArray[i].x, hiArray[i].y, 5, 5); // 可以调整圆点大小适配效果
  }
}

逻辑说明 #

• 你用inp.input(inputChange)绑定输入事件的方式就是createInput和textToPoints的正确关联方式：每次输入框内容发生变化时，就会触发回调函数，把输入框的实时内容通过font.textToPoints()转换为点集存到数组中
• draw()函数每帧渲染时直接遍历最新的点集数组即可，自动同步输入框的文本变化
• 如果生成的点过于密集/稀疏，可以在textToPoints第五个参数调整采样率，示例：font.textToPoints(inp.value(), 60, 200, size, {sampleFactor: 0.2})，数值越小点越少
• 如果运行无效果，优先检查字体文件路径是否正确，也可以替换为免费可商用字体测试

内容的提问来源于stack exchange，提问作者Melandin