사용자가 도형에 텍스트를 추가

Question

예를 들어 도형 내부에 텍스트를 추가하거나 변경할 수있는 기능을 사용자에게 제공하려면 어떻게해야합니까? 원.

의 내가 다음 코드 있다고 가정 해 봅시다, 사용자가 원 클릭 뭔가 쓸 때 텍스트를 추가하는 방법 :

var canvas = new fabric.Canvas('c1'); 
var circle = new fabric.Circle({radius: 30, fill: '#f55', top: 100, left: 100}); 

canvas.selectionColor = 'rgba(0,255,0,0.3)'; 
canvas.selectionBorderColor = 'red'; 
canvas.selectionLineWidth = 5; 
canvas.add(circle); 

내가 그것에 대해 question을 발견하지만 문제는 사용자를 원하는 것입니다 캔버스의 모든 모양에 텍스트를 추가하십시오.

Answer 1

the question you found's code을 사용하면 약간 수정 만 할 수 있습니다.

먼저 사용자가 캔버스를 클릭 한 곳을 확인하고 필드 텍스트를 확인해야합니다. 그렇게하려면 this answer과 this jsfiddle을보십시오.

function collides(rects, x, y) { 
    var isCollision = false; 
    for (var i = 0, len = rects.length; i < len; i++) { 
     var left = rects[i].x, right = rects[i].x+rects[i].w; 
     var top = rects[i].y, bottom = rects[i].y+rects[i].h; 
     if (right >= x 
      && left <= x 
      && bottom >= y 
      && top <= y) { 
      isCollision = rects[i]; 
     } 
    } 
    return isCollision; 
} 

어떤 텍스트 필드를 클릭했는지 알았 으면 해당 필드를 편집 할 수 있습니다.