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

查找看起来像数字的输入值并转换它们。（它只查找整数;如果你想测试带小数的数字，可以修改正则表达式。）

这不是世界上最强大的东西，因为它做了一个相当大的假设。为了更准确，你必须做一些事情，比如用类标记表单输入，以确定它们是否应该被视为数字，然后实现自己的序列化程序来遍历所有输入。

将JSON从本地存储反序列化为Fabric JS对象 - 从表单数据创建的JSON

1 个答案: