p5.js图中的可编辑文本

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

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

这些顶点和边对象我到目前为止（尽管他们可能不相关）

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

来源

2016-12-26 user2520385

入住这一点 - https://p5js.org/reference/#/p5.Element u可以使用P5元素和处理的mouseClicked（）事件，并把逻辑存在。P5元素有你问的所有功能。

来源

2016-12-26 05:59:53

谢谢，我试过寻找p5.Elements。但是，我发现输入文本的唯一选项是creatInput（），它创建了一个白色文本输入框。我希望输入框基本上完全透明。 – user2520385

使用Css风格来控制元素外观 –

哦好吧，有没有什么办法可以完成这个没有HTML/CSS和纯JavaScript？ – user2520385

p5.js图中的可编辑文本

回答

相关问题