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

Posted 2023-03-25

【中文标题】node.js loadFromDatalessJSON 上的 fabric.js 在组中移动对象

【英文标题】：fabric.js on node.js loadFromDatalessJSON moves objects when in a group

【发布时间】：2015-02-22 17:32:07

【问题描述】：

我在客户端序列化画布，并将其发布到 node.js 服务器（ubuntu 14.10，node.js 版本 v0.10.34 和 fabric 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 语句显示分别创建了两个矩形 (left:15, top-35) 和 (left:-35, top:15)。 在客户端上，顶部/左侧对象属性相对于组的中心。 这就是我分别使用 -fc.getWidth 和 -fc.getHeight left 和 top 创建组的原因。这在客户端上运行良好。 也许服务器上不是这样？

编辑：这似乎是 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]

但是这个问题应该已经解决了，我的画布上没有任何变换...

【问题讨论】：

我也遇到了同样的问题！ JSON.stringify(canvas) 导致我的对象组跳来跳去！

【参考方案1】：

我遇到了这个问题，并通过从 github 发布部分安装最新版本来修复它：https://github.com/kangax/fabric.js/releases

【讨论】：

感谢您的帮助。但是，我安装了最新版本（1.4.13），我仍然遇到同样的问题（在客户端，我还没有在服务器上尝试过）。还有其他想法吗？