2016-11-21 3 views
0

Ist es möglich, mehrere Canvas-JSON (oder) SVG-Dateien zusammenzuführen. Beispielcode:Fabric.js Mehrere Canvas-JSON (oder) SVG verschmelzen

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(); 

Hier haben wir drei Zahlen von json-Dateien. Ich muss diese Dateien & in neue Leinwand importieren.

+0

Hallo, haben Sie diese von verschiedenen Benutzern fusionieren müssen? Ich habe eine ähnliche Frage und frage mich nur, wie Sie das gelöst haben? –

Antwort

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); 

Verwandte Themen