fabricjs - loadFromJSON不尊重縮放

Question

所以發生了什麼事情是，當我從JSON加載數據時，X和Y的縮放比例並不受到尊重，所以當對象加載時，它會保持其原始高度/寬度。任何理由爲此和無論如何解決它？

左邊的矩形應該大於右邊。

var canvas = new fabric.Canvas('c'); 
 

 
let json = {"objects":[{"type":"rect","originx":"left","originy":"top","left":323,"top":259,"width":50,"height":300,"fill":"#ff5b6d","stroke":null,"strokewidth":0,"strokedasharray":null,"strokelinecap":"butt","strokelinejoin":"miter","strokemiterlimit":10,"scalex":1.54,"scaley":1.54,"angle":0,"flipx":false,"flipy":false,"opacity":1,"shadow":null,"visible":true,"clipto":null,"backgroundcolor":"","fillrule":"nonzero","globalcompositeoperation":"source-over","transformmatrix":null,"skewx":0,"skewy":0,"rx":0,"ry":0},{"type":"rect","originx":"left","originy":"top","left":205,"top":198,"width":50,"height":300,"fill":"#ff5b6d","stroke":null,"strokewidth":1,"strokedasharray":null,"strokelinecap":"butt","strokelinejoin":"miter","strokemiterlimit":10,"scalex":1,"scaley":1,"angle":0,"flipx":false,"flipy":false,"opacity":1,"shadow":null,"visible":true,"clipto":null,"backgroundcolor":"","fillrule":"nonzero","globalcompositeoperation":"source-over","transformmatrix":null,"skewx":0,"skewy":0,"rx":0,"ry":0}]} 
 

 
canvas.loadFromJSON(json);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script> 
 
<canvas id="c" width="1000" height="1000"></canvas>

Answer 1

var canvas = new fabric.Canvas('c'); 
 

 
let json = {"objects":[{"type":"rect","originX":"left","originY":"top","left":323,"top":259,"width":50,"height":300,"fill":"#ff5b6d","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.54,"scaleY":1.54,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"rect","originX":"left","originY":"top","left":205,"top":198,"width":50,"height":300,"fill":"#ff5b6d","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipy":false,"opacity":1,"shadow":null,"visible":true,"clipto":null,"backgroundcolor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}]} 
 

 
canvas.loadFromJSON(json);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script> 
 
<canvas id="c" width="1000" height="1000"></canvas>

fabricjs對象屬性是在駱駝的情況。如果你提供所有適當的密鑰，一切都會正常工作。我已將您的json數據密鑰更改爲駱駝大小寫。您可以獲取所有對象屬性here。

Answer 2

好像你可以操縱的每個對象，因爲它是正在興建或沿的東西。

var canvas = new fabric.Canvas('c'); 
 

 
let json = {"objects":[{"type":"rect","originx":"left","originy":"top","left":323,"top":259,"width":50,"height":300,"fill":"#ff5b6d","stroke":null,"strokewidth":0,"strokedasharray":null,"strokelinecap":"butt","strokelinejoin":"miter","strokemiterlimit":10,"scalex":1.54,"scaley":1.54,"angle":0,"flipx":false,"flipy":false,"opacity":1,"shadow":null,"visible":true,"clipto":null,"backgroundcolor":"","fillrule":"nonzero","globalcompositeoperation":"source-over","transformmatrix":null,"skewx":0,"skewy":0,"rx":0,"ry":0},{"type":"rect","originx":"left","originy":"top","left":205,"top":198,"width":50,"height":300,"fill":"#ff5b6d","stroke":null,"strokewidth":1,"strokedasharray":null,"strokelinecap":"butt","strokelinejoin":"miter","strokemiterlimit":10,"scalex":1,"scaley":1,"angle":0,"flipx":false,"flipy":false,"opacity":1,"shadow":null,"visible":true,"clipto":null,"backgroundcolor":"","fillrule":"nonzero","globalcompositeoperation":"source-over","transformmatrix":null,"skewx":0,"skewy":0,"rx":0,"ry":0}]} 
 

 
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), (o, object) => { 
 
        object.scale(o.scalex, o.scaley); 
 
        }); 
 
canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script> 
 
<canvas id="c" width="1000" height="1000"></canvas>