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.
}

但是情况是我需要在json中保存这些id，所以当我加载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加载画布并通过其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

1 个答案: