将对象标识符分配给fabric.js中的某些对象并将其保存为json答案

【问题标题】：Assign object identifier to some objects in fabric.js and save it as json将对象标识符分配给fabric.js中的某些对象并将其保存为json
【发布时间】：2017-07-03 17:02:57
【问题描述】：

我正在使用 fabric.js 与画布进行交互。我需要为一些对象分配唯一 ID，然后使用这些 ID 访问这些对象。

我从How to select Fabric.js object programmatically 得到以下代码并添加到fabric.js 中

  var object = {
     id:   this.id,
  }

现在，我正在使用以下代码动态添加一些对象的 ID：

for (i=0;i<10;i++)
{
  var rect = new fabric.Rect({
       left: 100,
       top: 100,
       fill: 'red',
        id: 'RECT'+i
       });
    alert(rect.id) //this is showing me the ids of each rectangle.
}

但情况是我需要将这些 id 保存在 json 中，这样当我加载 json 时，我可以通过程序通过它们的 id 访问对象。我尝试了以下代码：

  var json = JSON.stringify( canvas.toDataLessJSON(['id']) );

有了这个，我没有得到 JSON 中的 id。请建议我一种可以将少数对象的 ID 保存到 JSON 中的方法。

【问题讨论】：

我添加了一个可用的 JSFiddle 供您参考。希望对您有所帮助！
@TimHarker。非常感谢。我现在可以在 json 中获取 id。但是有可能用 JavaScript 访问这些 id 吗？我正在尝试但做不到。
当然，我用第 4 步更新了小提琴，http://jsfiddle.net/rekrah/dw3bakkp/。我假设当您说“......是否可以使用 JavaScript 访问这些 ID。”您指的是无需使用canvas.loadFromJSON。无论如何，看看更新 JSFiddle 并告诉我。

标签： json fabricjs

【解决方案1】：

这是一个有效的 JSFiddle：http://jsfiddle.net/rekrah/dw3bakkp/

试试这个：var json = JSON.stringify(canvas.toJSON(['id']));

并从 JSON 加载画布并通过其 id 访问对象：

var rectOne, rectTwo;  
canvas.loadFromJSON(json, function () {}, 
  function (o, object) {
    switch (object.id) {
        case 'RECT1':
            rectOne = object;
            break;            
        case 'RECT2':
            rectTwo = object;
            break;
        default:
            break;
    }
});

这是我正在整理的一个使用代码的网站：

http://xpressclocks.azurewebsites.net/customize/abstract/liquid/white-paint-splash-on-black-background

【讨论】：