p5.js圖中的可編輯文本

Question

我想在p5.js中編寫一個交互圖。到目前爲止，我已經能夠在左鍵單擊時添加頂點，以及在左鍵單擊一對頂點時添加頂點。但是，當我創建頂點或邊時，我還需要一個數字來表示權重顯示在頂點/邊的旁邊，如「1」。然後，當我點擊這個數字時，我希望能夠動態地編輯字符串。

到目前爲止，我找到的最好的是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); 
    } 
} 

Answer 1

入住這一點 - https://p5js.org/reference/#/p5.Element u可以使用P5元素和處理的mouseClicked（）事件，並把邏輯存在。P5元素有你問的所有功能。