Question

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

按索引canvas.getItem(0);

进行调用

我想要canvas.getItemByName(itemName);

之类的东西

Answer 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');。

Answer 2

更新：

使用LodashJS，您可以使用：

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

Answer 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');。

Fabric.js：按名称获取对象

3 个答案: