Load From Json fabricJS

Load From Json fabricJS

本文关键字：fabricJS Json From Load      更新时间：2023-09-26

我正试图从文本区加载对象，下面显示了我的代码(与导出代码)，但我无法找出如何loadfromjson。有人能帮忙吗?我在互联网上搜索了一个类似的例子，但我找不到一个，除了一个在kitensink json选项卡上。

// to JSON string
$("#canvas2json").click(function(){
    canvas.isDrawingMode = false;
    if(!window.localStorage){alert("This function is not supported by your browser."); return;}
    var json = JSON.stringify(canvas);
    //canvas.renderAll();
    $("#myTextArea").text(json);
});

// from JSON string
$("#loadJson2Canvas").click(function(){

var jsonLoad = "'" + document.getElementById("myTextArea")+ "'";
//alert(jsonLoad).value;
canvas = window.canvas = new fabric.Canvas('canvas');
canvas.loadFromJSON(jsonLoad, canvas.renderAll.bind(canvas));

});

脚本中的问题是以下语句:

var jsonLoad = "'" + document.getElementById("myTextArea")+ "'";

这不会返回textarea的内容，而是返回DOM元素，因此返回. tostring结果。因为你使用的是jQuery你可以这样做

$("#myTextArea").val()

所以:

$(function() {
  var canvas = new fabric.Canvas('c');
  /*
  canvas.add(new fabric.Circle({
    radius: 50,
    left: 0,
    top: 0,
    fill: '#0B61A4'
  }));
  */
  $("#canvas2json").click(function() {
    var json = canvas.toJSON();
    $("#myTextArea").text(JSON.stringify(json));
  });
  $("#loadJson2Canvas").click(function() {
    canvas.loadFromJSON(
      $("#myTextArea").val(),
      canvas.renderAll.bind(canvas));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='c' width=300 height=150></canvas>
<br/>
<button id='canvas2json'>canvas2json</button>
<button id='loadJson2Canvas'>loadJson2Canvas</button>
<br/>
<textarea id='myTextArea'></textarea>

相关文章：