p5.js 그래프의 편집 가능한 텍스트

Question

p5.js에 대화식 그래프를 코딩하고 싶습니다. 지금까지 왼쪽 클릭에 꼭지점을 추가하고 한 쌍의 꼭지점을 마우스 왼쪽 버튼으로 클릭하면 가장자리를 추가 할 수있었습니다. 그러나 꼭지점이나 가장자리를 만들 때 '1'과 같이 꼭지점/가장자리 옆에 가중치를 나타내는 숫자가 필요합니다. 그런 다음이 숫자를 클릭하면 동적으로 문자열을 편집 할 수 있기를 원합니다.

지금까지 내가 가장 잘 찾은 것은 createInput()이지만이 방법으로는 큰 흰색 텍스트 입력 상자가 만들어지기에 충분히 미묘하지 않습니다. 나는 문자열을 클릭 할 때 깜박이는 텍스트 커서 만 나타나기를 원합니다. 내가 어떻게 할 수 있니?

이는 정점과 에지 오브젝트 I가 지금까지 (그들은 관련없는 있지만)

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 요소에는 질문에서 묻는 모든 기능이 있습니다.