Fabric.js lnot load path object from JSOn

Question

Я использую fabric.js для загрузки объектов на холст. JSON возвращается из запроса базы данных mysql.

Все типы объектов загружаются штрафом, за исключением объекта пути. Когда объект пути пытается загрузить, я получаю сообщение об ошибке в firebug.

ТипError: n не является функцией .... extend (i, e), i.setSourcePath (s), n (i)}): n (новый t.Path (e.path, e))}, t.Path.ATTRIBUTE ...

Вот мой javaScript с двумя разными объектами. Прямой объект загружается нормально, но путь получит ошибку.

document.getElementById("save_json").onclick = function(ev) { 
    var state1 = '{"objects":[{"type":"path","originX":"center","originY":"center","left":344.79,"top":242.77,"width":143.92,"height":16.39,"fill":null,"stroke":"#ffffff","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"round","strokeLineJoin":"round","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","path":[["M",272.8251306873145,250.96509240246408],["Q",272.8251306873145,250.96509240246408,273.3251306873145,250.96509240246408],["Q",273.8251306873145,250.96509240246408,274.0500382534308,250.96509240246408],["Q",274.2749458195471,250.96509240246408,275.69966851789593,250.10266940451746],["Q",277.12439121624476,249.24024640657083,278.5491139145936,248.37782340862424],["Q",279.9738366129424,247.51540041067761,280.923651745175,246.652977412731],["Q",281.87346687740757,245.7905544147844,283.77309714187265,245.3593429158111],["Q",285.6727274063378,244.9281314168378,286.6225425385703,244.06570841889118],["Q",287.5723576708029,243.20328542094455,289.471987935268,242.34086242299793],["Q",291.3716181997331,241.47843942505133,294.2210635964308,240.61601642710474],["Q",297.0705089931285,239.75359342915812,299.44504682370984,239.3223819301848],["Q",301.81958465429125,238.8911704312115,305.6188451832215,238.02874743326487],["Q",309.4181057121517,237.16632443531827,312.2675511088494,236.735112936345],["Q",315.11699650554704,236.30390143737168,320.3409797328261,235.87268993839837],["Q",325.56496296010516,235.44147843942505,329.8391310551517,235.44147843942505],["Q",334.1132991501982,235.44147843942505,340.28709750970984,235.01026694045174],["Q",346.4608958692215,234.57905544147843,351.68487909650054,234.57905544147843],["Q",356.9088623237796,234.57905544147843,362.6077531171749,234.57905544147843],["Q",368.30664391057024,234.57905544147843,372.1059044395005,234.57905544147843],["Q",375.9051649684307,234.57905544147843,380.65424062959346,234.57905544147843],["Q",385.40331629075627,234.57905544147843,387.77785412133767,235.01026694045174],["Q",390.15239195191907,235.44147843942505,393.9516524808493,235.87268993839837],["Q",397.75091300977954,236.30390143737168,400.12545084036094,236.735112936345],["Q",402.49998867094234,237.16632443531827,405.34943406764,237.59753593429159],["Q",408.19887946433767,238.0287474332649,410.0985097288028,238.45995893223818],["Q",411.9981399932679,238.8911704312115,413.42286269161673,238.8911704312115],["Q",414.84758538996556,238.8911704312115,415.79740052219813,238.8911704312115],["Q",416.7472156544307,238.8911704312115,416.7472156544307,239.3223819301848],["L",416.7472156544307,239.75359342915812]],"pathOffset":{"x":344.78617317087264,"y":242.77207392197124}}],"background":""}'; 

    var state2 = '{"objects":[{"type":"rect","originX":"left","originY":"top","left":368.31,"top":284.6,"width":126.33,"height":64.68,"fill":"rgba(0, 0, 0, 0)","stroke":"#ffffff","strokeWidth":3,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","rx":0,"ry":0}],"background":""}'; 

    var jsClean = state1.replace(/"objects"/, 'objects'); 
    var jsonObj = JSON.parse(JSON.stringify(jsClean)); 
    var jsonobj2 = eval('(' + jsonObj + ')'); 

    var obj = new fabric[fabric.util.string.camelize(fabric.util.string.capitalize(jsonobj2.objects[0].type))].fromObject(jsonobj2.objects[0]); 
    // Add to canvas 
    canvas.add(obj); 
    obj.setOpacity(0); 
    obj.animate('opacity', 100, { 
    duration: 2000, 
    onChange: canvas.renderAll.bind(canvas), 
    }); 

} 

Я бы очень признателен всем, кому нужна помощь. Огромное спасибо!!

Answer 1

Я смог исправить свою проблему. Я считаю, что проблема связана с данными json и анализом. Я также использовал метод enlivenObjects.

  document.getElementById("save_json").onclick = function(ev) { 
       var state1 = '{"objects":[{"type":"path","originX":"center","originY":"center","left":344.79,"top":242.77,"width":143.92,"height":16.39,"fill":null,"stroke":"#ffffff","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"round","strokeLineJoin":"round","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","path":[["M",272.8251306873145,250.96509240246408],["Q",272.8251306873145,250.96509240246408,273.3251306873145,250.96509240246408],["Q",273.8251306873145,250.96509240246408,274.0500382534308,250.96509240246408],["Q",274.2749458195471,250.96509240246408,275.69966851789593,250.10266940451746],["Q",277.12439121624476,249.24024640657083,278.5491139145936,248.37782340862424],["Q",279.9738366129424,247.51540041067761,280.923651745175,246.652977412731],["Q",281.87346687740757,245.7905544147844,283.77309714187265,245.3593429158111],["Q",285.6727274063378,244.9281314168378,286.6225425385703,244.06570841889118],["Q",287.5723576708029,243.20328542094455,289.471987935268,242.34086242299793],["Q",291.3716181997331,241.47843942505133,294.2210635964308,240.61601642710474],["Q",297.0705089931285,239.75359342915812,299.44504682370984,239.3223819301848],["Q",301.81958465429125,238.8911704312115,305.6188451832215,238.02874743326487],["Q",309.4181057121517,237.16632443531827,312.2675511088494,236.735112936345],["Q",315.11699650554704,236.30390143737168,320.3409797328261,235.87268993839837],["Q",325.56496296010516,235.44147843942505,329.8391310551517,235.44147843942505],["Q",334.1132991501982,235.44147843942505,340.28709750970984,235.01026694045174],["Q",346.4608958692215,234.57905544147843,351.68487909650054,234.57905544147843],["Q",356.9088623237796,234.57905544147843,362.6077531171749,234.57905544147843],["Q",368.30664391057024,234.57905544147843,372.1059044395005,234.57905544147843],["Q",375.9051649684307,234.57905544147843,380.65424062959346,234.57905544147843],["Q",385.40331629075627,234.57905544147843,387.77785412133767,235.01026694045174],["Q",390.15239195191907,235.44147843942505,393.9516524808493,235.87268993839837],["Q",397.75091300977954,236.30390143737168,400.12545084036094,236.735112936345],["Q",402.49998867094234,237.16632443531827,405.34943406764,237.59753593429159],["Q",408.19887946433767,238.0287474332649,410.0985097288028,238.45995893223818],["Q",411.9981399932679,238.8911704312115,413.42286269161673,238.8911704312115],["Q",414.84758538996556,238.8911704312115,415.79740052219813,238.8911704312115],["Q",416.7472156544307,238.8911704312115,416.7472156544307,239.3223819301848],["L",416.7472156544307,239.75359342915812]],"pathOffset":{"x":344.78617317087264,"y":242.77207392197124}}],"background":""}'; 

       var stateFin = JSON.parse(state1);     

       fabric.util.enlivenObjects([stateFin.objects[0]], function(objects) { 
        var origRenderOnAddRemove = canvas.renderOnAddRemove; 
        canvas.renderOnAddRemove = false; 

        objects.forEach(function(o) { 
         canvas.add(o); 
        }); 
        canvas.renderOnAddRemove = origRenderOnAddRemove; 
        canvas.renderAll(); 
       }); 

      }