JSON update while using transform

[ahexemer]

I am having a problem in seeing updates in canvas_result.json_data while using transform on rect:

As an example, I am adding a few lines to app.py If I add a few simple lines the top and left updates while using transform but somehow not width and height while scaling a rect

(this is the last part of app.py)

# Do something interesting with the image data and paths
if canvas_result.image_data is not None:
    st.image(canvas_result.image_data)
if canvas_result.json_data is not None:
    st.dataframe(pd.json_normalize(canvas_result.json_data["objects"]))
    # Just adding a json view of the first rect. 
    dic = canvas_result.json_data["objects"][0]
    st.text('Top value in json =' + str(dic['top']))
    st.text('Left value in json =' + str(dic['left']))
    st.text('Height value in json =' + str(dic['height']))     
    st.text('Width value in json =' + str(dic['width'])) 

[andfanilo]

Hello @ahexemer,

Under the hood, json_data is a FabricJS object exported in JSON with .toObject. It seems for a scaled object, you will need to apply the scaleX/scaleY factor to the height/width to retrieve the correct values. FabricJS preserves the original dimensions and applies a ratio independently.

st.text(f"Scaled height: {dic['height'] * dic['scaleY']}")
st.text(f"Scaled width: {dic['width'] * dic['scaleX']}")

doesn't seem like rotating the rectangle adds more complexity :) .

Best, Fanilo

[ahexemer]

Hi Fanilo, Thanks for the reply. Yes, in the actual code I scale the value you are correct. I was more wondering about the updating of the width and height values in the JSON while applying a "transform" to a rectangular. Cheers, Alex

[andfanilo]

Yup, unfortunately that's not on my side :) I directly export the FabricJS object to JSON and I don't mess up with it because I'm currently working on reloading canvas from this JSON state, so I guess if I edit the width/height in the JSON i may mess up future Fabric.js reloading :confused:

But yeah, thanks for bringing this up! Hopefully this can help other users. Feel free to close this up if you have got your answers.

Cheers, Fanilo