Fabric.js：按名称获取对象答案

【问题标题】：Fabric.js: Get objects by nameFabric.js：按名称获取对象
【发布时间】：2014-01-16 10:08:25
【问题描述】：

是否可以通过名称获取Fabric.js 对象？我可以添加子类，这将允许我向对象添加自定义名称属性。但是在那之后我可以按名称而不是索引来调用对象吗？例如

按索引调用canvas.getItem(0);

我想要canvas.getItemByName(itemName);之类的东西

【问题讨论】：

【解决方案1】：

您可以使用以下代码在应用程序级别执行此操作：

/**
 * Item name is non-unique
 */
fabric.Canvas.prototype.getItemsByName = function(name) {
  var objectList = [],
      objects = this.getObjects();

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

  return objectList;
};

如果对象名称是唯一的，您可以执行以下操作：

/**
 * Item name is unique
 */
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.getItemByName('name1'); 或canvas.getItemsByName('name1');。

【讨论】：

【解决方案2】：

更新：

使用 LodashJS，您可以使用：

object = _.find(canvas._objects, function(o) { return o.name === 'name1' })

【讨论】：

【解决方案3】：

我稍微扩展了这个想法，以包括组对象和按 any 属性进行搜索，而不仅仅是名称。

当预期匹配多个元素时（非唯一属性），或预期仅匹配一个元素时（唯一属性，如 ID）：

/**
 * Non-unique attributes
 */
fabric.Canvas.prototype.getItemsByAttr = function(attr, val) {
    var objectList = [];
    traverseObjects(this.getObjects(), attr, val, objectList);
    return objectList;
};

/**
 * Unique attribute
 */
fabric.Canvas.prototype.getItemByAttr = function(attr, val) {
    var objectList = [];
    traverseObjects(this.getObjects(), attr, val, objectList);
    return objectList[0];
};

/**
 * Traverse objects in groups (and subgroups)
 */
function traverseObjects(objects, attr, val, objectList){
    for(i in objects){
        if(objects[i]['type'] == 'group'){
            traverseObjects(objects[i].getObjects(),attr,val, objectList);
        } else if(objects[i][attr] == val){
            objectList.push(objects[i]);
        }
    }
}

现在您可以致电canvas.getItemByAttr('name','name1'); 或canvas.getItemsByAttr('someAttr','someValue');。

【讨论】：