fabric.ext
fabric.ext copied to clipboard
fabric.ext Problems with toJSON and loadFromJSON
Her is a code snippet:
$("#activities_1").click(function(){
task_nr++;
global_ctx_nr++;
task[task_nr] = new fabric.Rect({
width: 120,
height: 60,
angle: 0,
rx: 10,
ry: 10,
fill: 'rgba(0,0,0,0.0)',
strokeWidth: 2,
stroke: 'rgb(0,0,0)',
originX: 'center',
originY: 'center'
});
task_text[task_nr] = new fabric.IText('Task ' + task_nr, {
fontSize: 10,
fontFamily: 'Arial',
originX: 'center',
originY: 'center'
});
task_group[task_nr] = new fabric.Group([ task[task_nr], task_text[task_nr] ], {
transparentCorners: false,
hasRotatingPoint: false,
lockScalingX: true,
lockScalingY: true,
left: 10,
top: 10,
hasBorders: false,
cornerColor: 'rgb(166,32,72)',
imsID: 'global_ctx_nr_' + global_ctx_nr,
imsOBJ_ID: '0'
});
task_group[task_nr].setControlsVisibility({tl: false, tr: false,bl: false, br: false,});
task_group[task_nr].on('object:dblclick', function (e) {
var o = canvas.getActiveObject();
var imsID = o.get('imsID');
var posX = 0;
var posY = 0;
posX = e.e.clientX - 50;
posY = e.e.clientY - 50;
var imsOBJ_ID = '0';
imsOBJ_ID = o.get('imsOBJ_ID');
if(imsOBJ_ID === '0' || imsOBJ_ID === 'undefined')
{
$('#contextMenueNichtVerlinkt').css('top', posY);
$('#contextMenueNichtVerlinkt').css('left', posX);
$('#contextMenueNichtVerlinkt').css('display', 'block');
}
else
{
$('#contextMenueVerlinkt').css('top', posY);
$('#contextMenueVerlinkt').css('left', posX);
$('#contextMenueVerlinkt').css('display', 'block');
o.set("fill",'rgba(166,32,72,0.1)');
canvas.renderAll();
}
});
canvas.add(task_group[task_nr]).setActiveObject(task_group[task_nr]);
});
But when i save the elements on Canvas with canvas.toJSON() and reload with canvas.loadFromJSON() the DbClick-Function do not work. canvas.toJason: _var imsCanvasInhalt = JSON.stringify(canvas.toJSON(['imsID', 'imsOBJ_ID', 'controlsVisibility', 'hasRotatingPoint', 'hasBorders', 'cornerColor', 'borderColor', 'transparentCorners', 'lockScalingX', 'lockScalingY']));
canvas.loadFromJason: canvas.loadFromJSON(<%= diaDiagramm %>, canvas.renderAll.bind(canvas)); Is this a problem of your library or the canvas.toJSON-funktion/canvas.loadFromJSON-funktion?
Another problem is the: canvas.fireEventForObjectInsideGroup = true; this do not work. I can not edit, move, rotate the task_text[task_nr] in the task_group[task_nr].