fabric.ext icon indicating copy to clipboard operation
fabric.ext copied to clipboard

fabric.ext Problems with toJSON and loadFromJSON

Open kurtknippschild opened this issue 7 years ago • 1 comments

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].

kurtknippschild avatar Oct 15 '16 13:10 kurtknippschild