识别 Fabric JS 中的每个绘制路径答案

【问题标题】：Identify each drawn path in Fabric JS识别 Fabric JS 中的每个绘制路径
【发布时间】：2014-10-14 11:43:19
【问题描述】：

我正在尝试识别每张图纸。

例如，在我绘制一个对象后，我希望该对象具有专有名称 =“我的绘图 1”，以便以后可以轻松引用它

canvas.getObjectByName('My Drawing Name');

getObjectByName 函数

fabric.Canvas.prototype.getItemByName = function(name) {
    var object = null, objects = this.getObjects();

    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].name && objects[i].name === name) {
            object = objects[i];
            break;
        }
    }

    return object;
};

激活绘图功能的代码：

         canvas.isDrawingMode = true;

         var img = $("#patternImg")[0];

         var texturePatternBrush = new fabric.PatternBrush(canvas);
         texturePatternBrush.source = img;
         texturePatternBrush.selectable = true;
         texturePatternBrush.name = img.getAttribute("data-name");

         canvas.freeDrawingBrush = texturePatternBrush;
         canvas.freeDrawingBrush.width = img.getAttribute("data-height");

使用上面的代码，我可以通过以下方式检查是否可以验证绘图是否存在：

 fabric.Canvas.prototype.getDrawByName = function(name) {
    var object = null, objects = this.getObjects();

    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].canvas.freeDrawingBrush.name && objects[i].canvas.freeDrawingBrush.name === name) {
            object = objects[i];
            break;
        }
    }

    return object;
};

问题是每次我绘制一个具有另一个名称 canvas.FreeDrawingBrush.name 的对象对于我的画布上的每个对象都是相同的。

我对 FabricJS 不太熟悉，我什至不知道我正在尝试做的事情是否可能。至少我让自己清楚了我想要做什么？

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

当访问fabric.Object 的canvas 属性时，您只是获得了对该对象呈现的fabric.Canvas 元素的引用。这个fabric.Canvas 元素的freeDrawingBrush 属性将始终是当前空闲的绘图画笔。

相反，当它完成绘制时，我会将这个name 属性设置到每个单独的对象上。（这可能是当您退出绘图模式时，或者可能是在您切换到不同的画笔之前）使用fabric.Object.set 方法。

这样做，您不会以任何方式依赖对象的 canvas 属性。

【讨论】：