在Fabric.js中僅對一個對象進行字符串化

Question

我正在使用fabricJS。 這是一個很棒的繪圖庫。

var data = JSON.stringify(canvas);

以上命令用於以JSON格式獲取所有對象及其屬性。 但是，我只想stringfy一個對象。

例如。 使用布料創建矩形

var rec = new fabric.Rect({
    left: mouse_pos.x,
    top: mouse_pos.y,
    width: 75,
    height: 50,
    fill: 'white',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  });
canvas.add(rec);

我想要得到的JSON僅此對象（矩形）被添加到畫布，而不是JSON整個畫布被渲染。 可能類似於var data = JSON.stringfy(rec); 。 有沒有辦法這樣做，因為我想通過套接字發送添加到畫布的最新對象，而不是整個畫布對象，因為JSON對象的大小，整個畫布對象反過來會消耗不必要的帶寬。

Answer 1

是的你可以！ :)

var rect = new fabric.Rect({
    left: mouse_pos.x,
    top: mouse_pos.y,
    width: 75,
    height: 50,
    fill: 'white',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  });

canvas.add(rect);

// get last item
var obj = canvas.item(canvas.size() - 1);

// stringify only one object
var json = JSON.stringify(obj);

Answer 2

您不能僅將選項對象轉換為JSON嗎？ 然后，您可以通過套接字發送它，在接收器上獲取JSON，將其解析並應用於fabric.Rect函數以在fabric.Rect繪制矩形。

var options = {
    left: mouse_pos.x,
    top: mouse_pos.y,
    width: 75,
    height: 50,
    fill: 'white',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
};

var rec = new fabric.Rect(options);
canvas.add(rec);

var yourData = JSON.stringify(options); // turns your options object into JSON

// ...rest of your code, that sends it through sockets...