從JSON加載 - 對象未縮放？

Question

我的猜測是，這是我做錯了什麼....

使用toJSON和fromJSON方法保存和加載結構圖，似乎縮放對象不保留其縮放比例。

僅供參考，PNG文件它創建看的權利。

所以，這裏的圖像是什麼樣子，當我將它保存：

然後，當我重新加載它：

代碼：

function save() { 
    // Need to clear selection and remove overlay before saving. 
    canvas.deactivateAll(); 
    if (!mask) {canvas.setOverlayImage('', canvas.renderAll.bind(canvas));} 
    // If they're zoomed in, reset the image 
    resetZoom(); 
    var name = prompt("Please enter a filename", "NewPresentation"); 
    var url = 'http://localhost/fabric/img/'+name+'.png'; 
    var stat = checkUrl(url); 
    //console.log("Stat: "+stat); 
    if (stat) { 
     if (!confirm(url+" already exists. Do you want to overwrite the existing file?")) return false; 
    } 

    $.ajax({ 
     type: 'POST', 
     url: 'save.php', 
     data: { 
      task: 'save', 
      img: canvas.toDataURL('png'), 
      json: JSON.stringify(canvas.toJSON()), 
      name: name, 
      coid: companyId, 
      id: '' 
     }, 
     success: function(json) { 
      if (!json.success) { 
       alert('Error!'); return; 
       currPresId = json.id; 
      } 
     } 
     }); 
    if (!mask) {canvas.setOverlayImage('dist/pixelmask.png', canvas.renderAll.bind(canvas));} 
    list(); 
} 

加載程序：

function loadPresentation(id) { 
    console.log("We should be loading "+id); 
    $.ajax({ 
     type: 'GET', 
     url: 'loadPresentation.php', 
     data: { 
      id: id 
     }, 
     success: function(json) { 
      console.log("Success"); 
      var j = JSON.parse(json); 
      canvas.loadFromJSON(j); 
     } 
    }); 
} 

任何人都可以指出我可能會做什麼，會導致這種情況？在此先感謝您的幫助。如果我沒有給你一些你需要排除故障的事情，LMK，我很快就會在這裏得到它。

Answer 1

想通了......

scaleX/scaleY數字是四捨五入的。

從JSON： 的scaleX：0.05

的實際規模是 的scaleX：0.05203252032520325

望着fabric.js代碼：

toObject: function(propertiesToInclude) { 

     var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, 

      object = { 
      type:    this.type, 
      originX:   this.originX, 
      originY:   this.originY, 
      left:    toFixed(this.left, NUM_FRACTION_DIGITS), 
      top:    toFixed(this.top, NUM_FRACTION_DIGITS), 
      width:    toFixed(this.width, NUM_FRACTION_DIGITS), 
      height:    toFixed(this.height, NUM_FRACTION_DIGITS), 
      fill:    (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, 
      stroke:    (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, 
      strokeWidth:  toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), 
      strokeDashArray: this.strokeDashArray, 
      strokeLineCap:  this.strokeLineCap, 
      strokeLineJoin:  this.strokeLineJoin, 
      strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), 
      scaleX:    toFixed(this.scaleX, NUM_FRACTION_DIGITS), 
      scaleY:    toFixed(this.scaleY, NUM_FRACTION_DIGITS), 
      angle:    toFixed(this.getAngle(), NUM_FRACTION_DIGITS), 
      flipX:    this.flipX, 
      flipY:    this.flipY, 
      opacity:   toFixed(this.opacity, NUM_FRACTION_DIGITS), 
      shadow:    (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, 
      visible:   this.visible, 
      clipTo:    this.clipTo && String(this.clipTo), 
      backgroundColor: this.backgroundColor 
      }; 

所以，容易的事是設置NUM_FRACTION_DIGITS：

canvas = new fabric.Canvas('canvas', {width: w, height: h}); 
canvas.setBackgroundColor($('#bgcolor').val(), canvas.renderAll.bind(canvas)); 
fabric.Object.NUM_FRACTION_DIGITS = 17; 

現在秤已正確保存。希望這可以幫助其他人走出困境。