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

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

Да кажем, че имам следния фрагмент, как да добавя текст, когато потребителят кликне върху кръга и напише нещо:

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