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

Question

我正在使用 fabric.js 与 canvas 互动。我需要为一些对象分配唯一 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 中。

Answer 1

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

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

并从 JSON 加载 canvas 并通过对象的 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

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

Assign object identifier to some objects in fabric.js and save it as json

json

fabricjs