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

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

Допустим, у меня есть следующий фрагмент, как добавить текст, когда пользователь нажимает на кружок и что-то пишет:

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

Я нашел вопрос об этом, но проблема в том, что я хочу, чтобы пользователь добавлял текст в каждой форме на холсте.


javascript fabricjs
person Christos Papoulas    schedule 24.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать код вопроса, который вы нашли, и просто немного изменить его.

Сначала вам нужно выяснить, где пользователь щелкнул на холсте, и посмотреть, какой там текст поля. Для этого посмотрите этот ответ и это 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;
}

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

person Ryan Erb    schedule 24.10.2013