fabric 4.3.1 - When using loadFromJSON, clipPath is invalid

[pushuo]

Version

4.3.1

Test Case

https://codepen.io/pushuo/pen/dyOqMdd

JSON:
{ "version": "4.3.0", "objects": [{ "type": "path", "version": "4.3.0", "originX": "left", "originY": "top", "left": 205.01, "top": 130.01, "width": 900, "height": 900, "fill": "#cdcdcd", "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "strokeLineCap": "butt", "strokeDashOffset": 0, "strokeLineJoin": "miter", "strokeMiterLimit": 4, "scaleX": 0.2, "scaleY": 0.2, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "shadow": null, "visible": true, "backgroundColor": "", "fillRule": "nonzero", "paintFirst": "fill", "globalCompositeOperation": "source-over", "skewX": 0, "skewY": 0, "path": [ ["M", 62, 62], ["L", 962, 62], ["L", 962, 962], ["L", 62, 962], ["L", 62, 62], ["z"] ] }, { "type": "image", "version": "4.3.0", "originX": "left", "originY": "top", "left": 205.01, "top": 130.01, "width": 310, "height": 190, "fill": "rgb(0,0,0)", "stroke": null, "strokeWidth": 0, "strokeDashArray": null, "strokeLineCap": "butt", "strokeDashOffset": 0, "strokeLineJoin": "miter", "strokeMiterLimit": 4, "scaleX": 0.57, "scaleY": 0.57, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "shadow": null, "visible": true, "backgroundColor": "", "fillRule": "nonzero", "paintFirst": "fill", "globalCompositeOperation": "source-over", "skewX": 0, "skewY": 0, "clipPath": { "type": "path", "version": "4.3.0", "originX": "left", "originY": "top", "left": 205.01, "top": 130.01, "width": 900, "height": 900, "fill": "#cdcdcd", "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "strokeLineCap": "butt", "strokeDashOffset": 0, "strokeLineJoin": "miter", "strokeMiterLimit": 4, "scaleX": 0.2, "scaleY": 0.2, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "shadow": null, "visible": true, "backgroundColor": "", "fillRule": "nonzero", "paintFirst": "fill", "globalCompositeOperation": "source-over", "skewX": 0, "skewY": 0, "path": [ ["M", 62, 62], ["L", 962, 62], ["L", 962, 962], ["L", 62, 962], ["L", 62, 62], ["z"] ], "inverted": false, "absolutePositioned": true }, "cropX": 0, "cropY": 0, "src": "http://topprin.com/image/catalog/demo/banner/4_en.jpg", "crossOrigin": "anonymous", "filters": [] }], "background": "#fff" }

Information about environment

Google browser

Steps to reproduce

1.canvas.toJSON()
2.Load json through loadFromJSON

Expected Behavior

The picture can fill the shape normally through clipPath

Actual Behavior

The picture is not in the shape

[asturur]

Please use the older issue, modify that one.
What kind of codepen/jsfiddle website can you use in china?

[pushuo]

Please use the older issue, modify that one.
What kind of codepen/jsfiddle website can you use in china?

Hello, thank you for replying to me.
I tried using #5266 issue but it didn’t work.
You only need to load the canvas with the json I provided with loadFromJSON to find the problem.
For this, I recorded two gifs to illustrate the problem

The following gif is the correct and expected situation

The gif below is to export the above picture with toJSON and load it with loadFromJSON. Obviously there is a problem, which is not what I want.

Please help me figure out a solution...

[pushuo]

Please use the older issue, modify that one.
What kind of codepen/jsfiddle website can you use in china?

This is the code

https://codepen.io/pushuo/pen/dyOqMdd

[pushuo]

I have solved this problem, but is it a bug?
The following code is executed after loadFromJSON

var objects = canvas.getObjects();

objects.forEach((e, i) => {
    if (e.clipPath) {
      objects[i-1].absolutePositioned = true;
       e.clipPath = objects[i-1];
   } 
});

canvas.renderAll();

[asturur]

i ll have a look at the code i think i understand the issue and is a bug that we can't solve. I ll add more details as soon as i can read the example

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.