JSON，Fabric和IText的错误 [英] Mistake with JSON, Fabric and IText

问题描述

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

I need to load a personalized object itext, loaded from json, but fabric return a error:

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

I need load this 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 中，该属性包含一种链接.

I think that my problem are in the property lnk, that contains a type of link.

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

The reason of this personalized object, is that, when i do double click in the object, should open the web in the browser.

只有我在itext对象类型中有此问题

This problem only i have it in itext object type

推荐答案

在这里，我创建了一个小提琴来处理IText json.希望对您有帮助.

Here I have created a fiddle to process IText json. I hope it will help you.

代码:

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();    
}       

小提琴链接

这篇关于JSON，Fabric和IText的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！