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