JSONからロードされた私は、パーソナライズされたオブジェクトiTextのをロードする必要がJSON、ファブリックとiTextの

Question

と間違い、しかし、生地がエラーを返す：

fabric.min.js:1 Uncaught TypeError: Cannot read property 'async' of undefined(anonymous function) @ fabric.min.js:1enlivenObjects @ fabric.min.js:1_enlivenObjects @ fabric.min.js:4loadFromJSON @ fabric.min.js:4success @ code.js:5067c @ jquery.min.js:2fireWith @ jquery.min.js:2k @ jquery.min.js:4r @ jquery.min.js:4 

私は、私が思うこのJSON

{ 
      "type": "itext", 
      "originX": "left", 
      "originY": "top", 
      "lockMovementX": false, 
      "lockMovementY": false, 
      "lockScalingX": false, 
      "lockScalingY": false, 
      "lockRotation": false, 
      "lockUniScaling": false, 
      "lockScalingFlip": false, 
      "borderColor": "rgba(102,153,255,0.75)", 
      "cornerColor": "rgba(102,153,255,0.5)", 
      "transparentCorners": true, 
      "padding": 0, 
      "hasBorders": true, 
      "hasControls": true, 
      "cornerSize": 12, 
      "id": 5, 
      "nombre": "Objeto_5", 
      "lnk": "http://www.google.com", 
      "left": 200, 
      "top": 190, 
      "width": 334.34, 
      "height": 52.43, 
      "fill": "rgb(0,0,0)", 
      "stroke": null, 
      "strokeWidth": 1, 
      "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", 
      "transformMatrix": null, 
      "text": "Click to change Text", 
      "fontSize": 40, 
      "fontWeight": "normal", 
      "fontFamily": "Times New Roman", 
      "fontStyle": "", 
      "lineHeight": 1.16, 
      "textDecoration": "", 
      "textAlign": "left", 
      "textBackgroundColor": "", 
      "styles": {} 
     } 

を読み込む必要があります私の問題は、リンクのタイプを含むlnkのプロパティにあることを確認してください。

このパーソナライズされたオブジェクトの理由は、オブジェクトをダブルクリックすると、ブラウザでWebを開く必要があるということです。

この問題は、私はiTextののJSONを処理するためにフィドルを作成している

Answer 1

ここでiTextのオブジェクト型でそれを持っています。それがあなたを助けることを願っています。

コード：

var canvas = this.__canvas = new fabric.Canvas('lienzo'); 

$(document).ready(function() { 

    var text = new fabric.IText("Click to change Text", { 
     originX: "left", 
     originY: "top", 
     lockMovementX: false, 
     lockMovementY: false, 
     lockScalingX: false, 
     lockScalingY: false, 
     lockRotation: false, 
     lockUniScaling: false, 
     lockScalingFlip: false, 
     borderColor: "rgba(102,153,255,0.75)", 
     cornerColor: "rgba(102,153,255,0.5)", 
     transparentCorners: true, 
     padding: 0, 
     hasBorders: true, 
     hasControls: true, 
     cornerSize: 12, 
     id: 5, 
     nombre: "Objeto_5", 
     lnk: "Pantalla_1", 
     left: 10, 
     top: 50, 
     width: 300, 
     height: 52, 
     fill: "rgb(0,0,0)", 
     stroke: null, 
     strokeWidth: 1, 
     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", 
     transformMatrix: null,     
     fontSize: 40, 
     fontWeight: "normal", 
     fontFamily: "Times New Roman", 
     fontStyle: "", 
     lineHeight: 1.16, 
     textDecoration: "", 
     textAlign: "left", 
     textBackgroundColor: "" 
    }); 
    canvas.add(text).renderAll().setActiveObject(text); 
    var JSon = JSON.stringify(canvas.toDatalessJSON(['id', 'lnk', 'lockUniScaling', 'borderColor', 'cornerColor', 'cornerSize'])); 
    canvas.clear(); 
    console.log("canvas cleared"); 
    canvas.loadFromJSON(JSon, canvasJSONCallBack, function(o, object) { 
    console.log(JSon); 
    canvas.setActiveObject(object); 
    }); 
}); 
function canvasJSONCallBack() { 
    canvas.renderAll(); 
    canvas.calcOffset();  
}  

fiddle link