2016-11-21 9 views
0

複数のキャンバスJSON(または)SVGファイルをマージすることは可能ですか? サンプルコード:Fabric.js複数のキャンバスJSON(または)SVGをマージ

var canvas, leftcanvas, rightcanvas, ctx, activeObject, text = ''; 
canvas = new fabric.Canvas('canvas'); 
ctx = canvas.getContext('2d'); 
text = new fabric.Text('canvas', { 
    left: 50, 
    top: 50, 
    fill: 'red', 
    fontFamily : 'Courier New', 
}); 
canvas.add(text).renderAll().setActiveObject(text); 

leftcanvas = new fabric.Canvas('leftcanvas'); 
var ctx1 = leftcanvas.getContext('2d'); 
var text = new fabric.Text('leftcanvas', { 
    left: 50, 
    top: 50, 
    fill: 'red', 
    fontFamily : 'Courier New', 
}); 
leftcanvas.add(text).renderAll().setActiveObject(text); 

rightcanvas = new fabric.Canvas('rightcanvas'); 
var ctx2 = leftcanvas.getContext('2d'); 
var text = new fabric.Text('rightcanvas', { 
    left: 50, 
    top: 50, 
    fill: 'red', 
    fontFamily : 'Courier New', 
}); 
rightcanvas.add(text).renderAll().setActiveObject(text); 

var JSON1, JSON2, JSON3 = ''; 
JSON1 = canvas.toJSON(); 
JSON2 = leftcanvas.toJSON(); 
JSON3 = rightcanvas.toJSON(); 

は、ここでは、JSONファイルの3つの数字を持っています。私はそれらのファイルを組み合わせて新しいキャンバスに&をインポートする必要があります。

+0

こんにちは、あなたは別のユーザーからこれらをマージする必要がありますか?私は似たような質問をしていますが、これをどうやって解決したのだろうか? –

答えて

0
var circle1 = new fabric.Circle({ 
    radius: 50, 
    fill: 'red', 
    left: 0 
}); 
var circle2 = new fabric.Circle({ 
    radius: 50, 
    fill: 'green', 
    left: 100 
}); 
var circle3 = new fabric.Circle({ 
    radius: 50, 
    fill: 'blue', 
    left: 200 
}); 

var group = new fabric.Group([ circle1, circle2, circle3 ], { 
    left: 200, 
    top: 100 
}); 

canvas.add(group); 

関連する問題