Question

我在客户端上序列化画布，并将其发布到node.js服务器（ubuntu 14.10，node.js版本v0.10.34和结构1.4.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 ) {}
    );

});

服务器代码：

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语句显示分别创建了两个rects（left：15，top-35）和（left：-35，top：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

node.js上的fabric.js loadFromDatalessJSON在组中移动对象

1 个答案: