p5.j​​s图中的可编辑文本

Question

我想在p5.js中编写交互式图表。到目前为止，我已经能够在左键单击时添加顶点，并在左键单击一对顶点时添加边缘。但是，当我创建一个顶点或边时，我还想要一个表示重量的数字显示在顶点/边的旁边，如'1'。然后，当我点击这个数字时，我希望能够动态编辑字符串。

到目前为止，我发现的最好的是createInput()，但这会创建一个大的白色文本输入框，这不够精细。我只想在单击字符串时出现闪烁的文本光标。我怎么能这样做？

这些是我到目前为止的Vertex和Edge对象（尽管它们可能不相关）

function Vertex(mouseX, mouseY, index) {
  this.x = mouseX;
  this.y = mouseY;
  this.index = index;
  this.weight = 0;
  this.radius = 16;
  this.col = [0,0,0];
  this.display = function() {
    noStroke();
    fill(this.col[0], this.col[1], this.col[2]);
    ellipse(this.x, this.y, this.radius, this.radius);
  }
}

function Edge(v1, v2) {
  this.v1 = v1;
  this.v2 = v2;
  this.weight = 0;
  this.col = [0,0,0];
  this.display = function() {
    stroke(0);
    fill(this.col[0], this.col[1], this.col[2]);
    line(v1.x, v1.y, v2.x, v2.y);
  }
}

Answer 1

检查一下 - https://p5js.org/reference/#/p5.Element 你可以使用P5元素并处理MouseClicked（）事件并将逻辑放在那里。 P5 Element具有您询问的所有功能。