將JSON從本地存儲反序列化到Fabric JS對象-從表單數據創建的JSON

Question

我正在將Fabric js用於我正在從事的項目，遇到了一些困難。 我的目的是允許用戶在表單中輸入詳細信息。 然后，該表單將變成JSON對象，並使用本地存儲進行存儲。

按下提交后，用戶將被帶到一個新頁面，在該頁面中檢索JSON並創建對象。

我對后半部分有困難。 將信息從表單導入JSON可以正常工作，各種測試表明輸出是應該的。

創建對象時存在問題，該對象在畫布上顯示為帶有角的簡單邊框，可以移動和選擇該對象，但是所有其他屬性（例如大小和顏色）都將丟失。 我認為這是因為JSON如何被反序列化。 我已經在尋找一種解決方案，但尚未找到任何解決方案，我們將不勝感激。

樣例代碼：

這是我的測試實例，該實例創建了預期的對象：

var a = {
    type: "rect",
    left:200,
    top:110,
    fill:'red',
    width:80,
    height:50
};

與上面相同，但來自本地存儲：

[Log] From JSON:    {"type":"rect","top":"110","left":"200","fill":"red","height":"50","width":"80"} (sim.html, line 135)

要獲取我正在使用的數據：

var test = localStorage.getItem("Number1");
console.log("From JSON: " +test);

var obj = JSON && JSON.parse(test) || $.parseJSON(test);
console.log(obj.type +"-"+ obj.left);

當在下面的方法中添加a時，它可以工作，而obj不起作用。 我可以看到報價之間的主要區別，但是我不確定這是否是問題，以及如何將其簡單刪除。

遍歷和渲染對象的功能：

    fabric.util.enlivenObjects([circle1, obj], function(objects) {
    var origRenderOnAddRemove = canvas.renderOnAddRemove;
    canvas.renderOnAddRemove = false;

    objects.forEach(function(o) {
        canvas.add(o);
    });
    canvas.renderOnAddRemove = origRenderOnAddRemove;
    canvas.renderAll();
});

非常感謝您的幫助。

Answer 1

我認為您可以修改“序列化”例程，以便將適當的輸入轉換為數字：

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        var value = this.value || '';
        if (/^\d+$/.test(value))
          value = +value;

        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(value);
        } else {
            o[this.name] = value;
       }
    }} );
    return o;
};

該操作查找看起來像數字的輸入值並將其轉換。 （它只查找整數；如果您還想測試帶小數的數字，則可以修改正則表達式。）

這並不是世界上最可靠的事情，因為它是一個相當大的假設。 為了更准確，您必須執行一些操作，例如用一個類標記表單輸入，以識別是否應將它們視為數字，然后實現自己的序列化程序遍歷所有輸入。