node.js上的fabric.js loadFromDatalessJSON在組中移動對象

Question

我正在序列化客戶端上的畫布，並將其發佈到node.js服務器（ubuntu 14.10，帶有node.js版本v0.10.34和結構1.4 0.13）。 在客戶端畫布上，對象位於組中。 問題是，在服務器上反序列化時移動對象。 客戶端代碼：

$(function(){ 
    fc= new fabric.Canvas('myCanvas'); 
    fc.setBackgroundColor('white'); 

    group = new fabric.Group([], { hasControls:false, hasBorders:true, top:-fc.getHeight(), left:-fc.getWidth(), width:2*fc.getWidth(), height:2*fc.getHeight(), hoverCursor:'default' }); 
    fc.add(group); 

    // create a rectangle object 
    var rect = new fabric.Rect({ 
     left: 150, 
     top: 100, 
     fill: 'red', 
     width: 20, 
     height: 20 
    }); 

    // "add" rectangle onto canvas 
    group.add(rect); 

    var rect2 = new fabric.Rect({ 
     left: 100, 
     top: 150, 
     fill: 'blue', 
     width: 20, 
     height: 20 
    }); 
    group.add(rect2); 

    fc.renderAll(); 

    $.post(window.location.origin+':8124/', { 
      width: group.getWidth(), 
      height: group.getHeight(), 
      data: encodeURI(JSON.stringify(fc.toDatalessJSON())) 
      }, function(data) {} 
    ); 

}); 

Server代碼：

var fabric = require('fabric').fabric; 
var express = require('express'); 
var app = express(); 
var fs = require('fs'); 
var PORT = 8124; 

var bodyParser = require('body-parser') 
    app.use(bodyParser.json({ limit: '50mb'}));  // to support JSON-encoded bodies 
    app.use(bodyParser.urlencoded({  // to support URL-encoded bodies 
    extended: true, 
    limit: '50mb' 
    })); 

app.post('/', function(req, res){ 
    console.log('Post received'); 
    if (req.body) { 
     res.writeHead(200, { 'Content-Type': 'image/png' }); 

     var w=parseInt(req.body.width); 
     var h=parseInt(req.body.height); 
     var canvas = fabric.createCanvasForNode(w, h); 
     console.log(req.body.data); 

     out = fs.createWriteStream(__dirname + '/mindmap.png'); 

     canvas.loadFromDatalessJSON(decodeURI(req.body.data), function() { 
       canvas.renderAll(); 

       console.log(JSON.stringify(canvas.toDatalessJSON())); 
       var stream = canvas.createPNGStream(); 
       stream.on('data', function(chunk) { 
         out.write(chunk); 
         console.log('writing chunk'); 
       }); 
       stream.on('end', function() { 
         out.end();      
       }); 
     }); 
    } 
}); 

app.listen(PORT); 

的執行console.log聲明顯示，兩個矩形創建（左：15，最高35）和（左：-35，頂部：15）。 在客戶端上，頂部/左側對象屬性相對於組的中心。 這就是爲什麼我分別用-fc.getWidth和-fc.getHeight創建組的原因。這在客戶端上工作正常。 也許這不是在服務器上的情況？

編輯：這似乎是loadFromDatalessJSON，至少在節點上的問題。 運行節點服務器上的下面的代碼示出了矩形的頂部/左屬性是序列化第一畫布和反序列化到在第二個之後錯誤：

var fabric = require('fabric').fabric; 
var fs = require('fs'); 


var canvas = fabric.createCanvasForNode(200, 200); 
canvas.setBackgroundColor('white'); 

var out = fs.createWriteStream(__dirname + '/mindmap.png'); 

var group = new fabric.Group([], { top:-200, left:-200, width:400, height:400}); 
canvas.add(group); 

var rect = new fabric.Rect({ 
      left:150, 
      top:100, 
      fill:'red', 
      width:20, 
      height:20 
}); 
group.add(rect); 

var rect2 = new fabric.Rect({ 
      left:100, 
      top:150, 
      fill:'blue', 
      width:20, 
      height:20 
}); 
group.add(rect2); 

canvas.renderAll(); 
console.log(JSON.stringify(canvas.toDatalessJSON())); 

var canvas2 = fabric.createCanvasForNode(200, 200); 
canvas2.loadFromDatalessJSON(canvas.toDatalessJSON()); 
canvas2.renderAll(); 

var stream = canvas2.createPNGStream(); 
stream.on('data', function(chunk) { 
     out.write(chunk); 
     console.log('writing chunk'); 
}); 
stream.on('end', function() { 
     out.end();      
     console.log('png image generated'); 
}); 

console.log(JSON.stringify(canvas2.toDatalessJSON())); 

下一步是在客戶端上運行的類似的代碼和看看問題是否存在。

EDIT2：同樣的問題發生在客戶端，並與toJSON，而不是toDatalessJSON。有人可以幫忙嗎？這是羣組序列化/反序列化的已知問題嗎？有沒有解決方法？

感謝

搜索類似問題之後，看起來這是非常相似的[＃1159] [https://github.com/kangax/fabric.js/issues/1159]

但這個問題應該是固定的，我沒有任何改變在我的畫布...

Answer 1

我有這個問題，並通過安裝在GitHub上的最新版本的發佈修復它部分：https://github.com/kangax/fabric.js/releases