javascript - 用户将文本添加到形状

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

我发现了一个问题，但问题是我希望用户在画布的每个形状中添加文本。

Answer 1

您可以使用您找到的问题的代码并进行一些修改。

您首先必须弄清楚用户在画布上单击的位置并查看那里的字段文本。为此，请查看此答案和此 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;
}

一旦您知道单击了哪个文本字段，您就可以编辑该字段。