javascript - JSON、Fabric 和 IText 的错误

Question

我需要加载一个个性化的对象itext，从json加载，但fabric返回错误:

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 上，它包含一种链接类型。

这个个性化对象的原因是，当我双击该对象时，应该在浏览器中打开网页。

这个问题只有我在 itext 对象类型中遇到

Answer 1

这里我创建了一个 fiddle 来处理 IText json。希望对您有帮助。

代码:

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