fabric.js on node.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) {} 
    ); 

}); 

Сервера:

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 слева и сверху соответственно. Это отлично работает на клиенте. Возможно, это не так на сервере?

EDIT: это, по-видимому, проблема с 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