Currently, I am facing some challenges while using Fabric js for a project that I am working on. My main goal is to create a form where users can input details, which will then be converted into a JSON object and stored locally.
After submitting the form, the user is redirected to a new page where the JSON data is retrieved and objects are generated.
The issue arises during the object creation process. While transforming the form information into JSON works fine, the resulting object only appears as a simple border with corners on the canvas. It lacks other attributes like size and color. This might be due to how the JSON data is being deserialized. Despite my efforts to find a solution, I have not been successful yet. Any assistance would be greatly appreciated.
Here's a snippet of sample code showcasing the creation of an object:
var a = {
type: "rect",
left:200,
top:110,
fill:'red',
width:80,
height:50
};
A comparison between creating an object directly and retrieving it from local storage:
[Log] From JSON: {"type":"rect","top":"110","left":"200","fill":"red","height":"50","width":"80"} (sim.html, line 135)
To retrieve the data, I am using the following script:
var test = localStorage.getItem("Number1");
console.log("From JSON: " +test);
var obj = JSON && JSON.parse(test) || $.parseJSON(test);
console.log(obj.type +"-"+ obj.left);
Although adding 'a' in the method below works correctly, 'obj' does not behave as expected. The key difference seems to be in the quotations, but I am unsure if this is the root cause or how to address it effectively.
Below is the function used to iterate over and render objects:
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();
});
I appreciate any assistance provided. Thank you.