Пользователь добавляет текст в фигуры

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

Как только вы узнаете, на какое текстовое поле было нажато, вы можете отредактировать это поле.