Fabric.js object 在加载 DOM 时从 JSON 呈现时无法更改填充颜色

Question

I am attempting to take a canvas element stylized with Fabric.js, convert it into a JSON and then presenting a limited/slightly static version of the Canvas on a page that a user with lower authorization can access. When presenting this user version of the form I call the canvas.loadFromJSON() method with JQuery when the DOM loads and in the callback function I do some validation/editing to the objects(ie fill color, hasControls, selectable, etc.). However, only some of these changes take effect, with the one I'm having trouble with being the color. The interesting thing is that when I console.log the objects and look at the fill property it's changed. It's only the actual visual of it that is not.

Here is the code...

let canvas = new fabric.Canvas("leasables-configuration");
// arrays that store different entities up for lease based on their status
//I need each of the elements in these to be different colors
let leasables = []; 
let closed = [];
let available = [];
let leased = [];

//use JQuery to run async requests so that I can 
//sort the various entities up for lease

$(function(){
    fetch("/api/leasables/get-all",{method: 'GET'})
        .then(response =>response.json())
        .then(data => {console.log(data);
                for (let leasable in data) {
                    leasables.push(data[leasable])
                    switch (data[leasable].leasableStatus.leasableStatus) {
                        case "leased":
                            console.log(data[leasable].leasableCode);
                            leased.push(data[leasable].leasableCode);
                            break;
                        case "open":
                            console.log(data[leasable].leasableCode);
                            available.push(data[leasable].leasableCode);
                            break;
                        case "closed":
                            console.log(data[leasable].leasableCode);
                            closed.push(data[leasable].leasableCode);
                            break;
                        default: break;
                    };
                }
//Start second async request to fetch JSON string from my POJO that is currently //published
                return fetch("/api/configurations/load", {method: 'GET'})
            }).then(response => response.json())
                .then(data => {
                    for (let field in data) {
                        if (field === "jsonification") {

// I have tried using canvas.renderOnAddRemove = false to see if there was a problem //with the timing of the data being rendered and my alterations to the fill color

                            canvas.loadFromJSON(data[field]);
                            canvas.renderAll();
                        }
                    }
                    clientLayer();
                });
    });

//I have tried keeping this logic in the callback section of the loadOnJSON function //but got the same result.

function clientLayer(){
    let objects = canvas.getObjects();
    console.log(objects);
    for (let element in objects) {
        let currentElement = objects[element];
//class is an attribute I gave to objects that were generic, the leasable objects do //not have the class attribute
        if (currentElement.class != undefined) {
            currentElement.selectable = false;
            currentElement.hoverCursor = 'default';
            canvas.sendToBack(currentElement);
        } else {
 //hasControls is commented out as after I adjust the size of the object the color //will change
            // currentElement.hasControls = false;
            if (leased.includes(currentElement.id)) {
               
                currentElement.fill = 'black';
            } else if (closed.includes(currentElement.id)) {
               
                currentElement.fill = 'grey';
            } else {
            
                currentElement.fill = 'white';
            }
        }
    }
//Still not too sure what the difference between requestRenderAll and renderAll is
    canvas.requestRenderAll();
}

This image shows that when expanded, the element has a fill attribute of white, yet it is still black.

This image was from directly after using the controls to change the size. As you can see, the rectangle is now white. But I want the rectangle to be white without having to use the controls.

Answer 1

I'm happy to announce that I have figured out a way around my problem. Instead of altering the objects after they were added to the canvas element as objects, I simply modified the JSON I was passing to the canvas.loadFromJSON method. This worked like a charm except when I assigned a strokeWidth property to the white squares, I got some funky behavior. Not to worry though as I changed the colors to better fit my overall color scheme.

let leasables = [];
let closed = [];
let available = [];
let leased = [];


window.onload = function(){
    fetch("/api/leasables/get-all",{method: 'GET'})
        .then(response =>response.json())
        .then(data => {console.log(data);
                for (let leasable in data) {
                    leasables.push(data[leasable])
                    switch (data[leasable].leasableStatus.leasableStatus) {
                        case "leased":
                            console.log(data[leasable].leasableCode);
                            leased.push(data[leasable].leasableCode);
                            break;
                        case "open":
                            console.log(data[leasable].leasableCode);
                            available.push(data[leasable].leasableCode);
                            break;
                        case "closed":
                            console.log(data[leasable].leasableCode);
                            closed.push(data[leasable].leasableCode);
                            break;
                        default: break;
                    };
                }
                return fetch("/api/configurations/load", {method: 'GET'})
            }).then(response => response.json())
                .then(data => {
                    for (let field in data) {
                        if (field === "jsonification") {
//Here is where the magic happens, a simple reordering of logic :)
                            let json = clientLayer(data[field]);
                            canvas.loadFromJSON(json);
                            canvas.renderAll();
                        }
                    }
                });
    };

function clientLayer(unmodifiedJson){
    unmodifiedJson = JSON.parse(unmodifiedJson);
    console.log("unmodified json");
    console.log(unmodifiedJson);
    for (let element of unmodifiedJson.objects) {
        console.log("element");
        console.log(element);
        if (element.class != undefined) {
            element.selectable = false;
            element.hoverCursor = 'default';
            canvas.sendToBack(element);
        } else {
            element.hasControls = false;
            element.hoverCursor = 'pointer';
            if (leased.includes(element.id)) {
                console.log("included in leased");
                element.fill = 'orange';
            } else if (closed.includes(element.id)) {
                console.log("included in closed");
                element.fill = 'grey';
            } else {
                console.log("included in open");
                element.fill = 'green';
                element.stroke = 'black';
                // element.strokeWidth = '0.5';
            }
        }
    }
    let modifiedJson = unmodifiedJson;
    console.log(modifiedJson);
    return modifiedJson;
}```