代码之家  ›  专栏  ›  技术社区  ›  anonymoose

对象属性不会通过JSON保存或加载持久化

  •  0
  • anonymoose  · 技术社区  · 7 年前

    我有一张画布,上面画着一个物体。我还有另存为JSON和从JSON加载功能。绘制的对象是绘制的,在加载应用程序时不可选择,这就是我希望它保持的方式,但当您从JSON加载时,它是可选择的。如何确保这些属性在保存+加载过程中保持不变?

    Here is a JSFiddle 让你明白我的意思。注意线条;当你加载应用程序时,它是不可触摸的。但是,如果保存JSON并加载它,则该行将变为可选。

    $(function() {
      var canvas = new fabric.Canvas('c');
    	
    	// Center Line
      var line = new fabric.Line([canvas.width / 2, 0, canvas.width / 2, canvas.height], {
        strokeWidth: 0.1,
        stroke: 'black',
        selectable: false,
      });
      canvas.add(line);
    
      $('#text').on('click', addtext);
    
      function addtext() {
        var text = new fabric.IText('Some Text!', {
          left: 10,
          top: 10
        });
        canvas.add(text);
      }
    
      // From Computer
      document.getElementById('imgLoader').onchange = function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function(event) {
          console.log('fdsf');
          var imgObj = new Image();
          imgObj.src = event.target.result;
          imgObj.onload = function() {
            // start fabricJS stuff
    
            var image = new fabric.Image(imgObj);
            image.set({
              left: 0,
              top: 0,
              angle: 20,
              padding: 10,
              cornersize: 10
            });
            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
            image.scale(0.2);
            canvas.add(image);
    
            // end fabricJS stuff
          }
    
        }
        reader.readAsDataURL(e.target.files[0]);
      }
    
      // Add Web IMG
      var myImg = 'https://i.imgur.com/q2oGjQ9.jpg';
      $('#addImage').on('click', addImg);
    
      function addImg() {
        fabric.Image.fromURL(myImg, function(oImg) {
          oImg.scale(0.2);
          canvas.add(oImg);
        });
      }
    
      // canvas2json
      $("#canvas2json").click(function() {
        var json = canvas.toJSON();
        $("#myTextArea").text(JSON.stringify(json));
        var a = document.createElement("a");
        var file = new Blob([JSON.stringify(json)], {
          type: 'text/plain'
        });
        a.href = URL.createObjectURL(file);
        a.download = 'json.txt';
        a.click();
      });
    
      // load json2canvas
      $("#loadJson2Canvas").click(function() {
        canvas.loadFromJSON(
          $("#myTextArea").val(),
          canvas.renderAll.bind(canvas));
      });
      $('#jsonload').change(function(e) {
        var file = e.target.files[0];
        if(!file) return;
        var reader = new FileReader();
        reader.onload = function(f) {
          var data = f.target.result;
          canvas.loadFromJSON(
          JSON.parse(data),
          canvas.renderAll.bind(canvas));
        };
        reader.readAsText(file);
        });
        $(this).val(null);
        return;
    });
    #myTextArea {
      width: 90%;
      height: 200px;
    }
    
    canvas {
      border: 1px solid black
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <button id="text">Add Text</button>
    
    <input type="button" id="addImage" value="Add Web IMG"/><input type="file" id="imgLoader"/>
    <br>upload json<input type="file" id="jsonload" />
    
    <br/><br/>
    
    <canvas id='c' width=500 height=500></canvas>
    
    <br/>
    
    <button id='canvas2json'>2JSON</button>
    <button id='loadJson2Canvas'>2CANVAS</button>
    
    <br/><br/>
    
    <textarea id='myTextArea' onfocus="this.select();" onmouseup="return false;"></textarea>
    1 回复  |  直到 7 年前
        1
  •  4
  •   Durga    7 年前
    var json = canvas.toJSON(['selectable']);
    

    添加其他属性 可选 ,您希望在执行时包括 toJSON()

    $(function() {
      var canvas = new fabric.Canvas('c');
    	
    	// Center Line
      var line = new fabric.Line([canvas.width / 2, 0, canvas.width / 2, canvas.height], {
        strokeWidth: 0.1,
        stroke: 'black',
        selectable: false,
      });
      canvas.add(line);
    
      $('#text').on('click', addtext);
    
      function addtext() {
        var text = new fabric.IText('Some Text!', {
          left: 10,
          top: 10
        });
        canvas.add(text);
      }
    
      // From Computer
      document.getElementById('imgLoader').onchange = function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function(event) {
          console.log('fdsf');
          var imgObj = new Image();
          imgObj.src = event.target.result;
          imgObj.onload = function() {
            // start fabricJS stuff
    
            var image = new fabric.Image(imgObj);
            image.set({
              left: 0,
              top: 0,
              angle: 20,
              padding: 10,
              cornersize: 10
            });
            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
            image.scale(0.2);
            canvas.add(image);
    
            // end fabricJS stuff
          }
    
        }
        reader.readAsDataURL(e.target.files[0]);
      }
    
      // Add Web IMG
      var myImg = 'https://i.imgur.com/q2oGjQ9.jpg';
      $('#addImage').on('click', addImg);
    
      function addImg() {
        fabric.Image.fromURL(myImg, function(oImg) {
          oImg.scale(0.2);
          canvas.add(oImg);
        });
      }
    
      // canvas2json
      $("#canvas2json").click(function() {
        var json = canvas.toJSON(['selectable']);
        $("#myTextArea").text(JSON.stringify(json));
        var a = document.createElement("a");
        var file = new Blob([JSON.stringify(json)], {
          type: 'text/plain'
        });
        a.href = URL.createObjectURL(file);
        a.download = 'json.txt';
        a.click();
      });
    
      // load json2canvas
      $("#loadJson2Canvas").click(function() {
        canvas.loadFromJSON(
          $("#myTextArea").val(),
          canvas.renderAll.bind(canvas));
      });
      $('#jsonload').change(function(e) {
        var file = e.target.files[0];
        if(!file) return;
        var reader = new FileReader();
        reader.onload = function(f) {
          var data = f.target.result;
          canvas.loadFromJSON(
          JSON.parse(data),
          canvas.renderAll.bind(canvas));
        };
        reader.readAsText(file);
        });
        $(this).val(null);
        return;
    });
    #myTextArea {
      width: 90%;
      height: 200px;
    }
    
    canvas {
      border: 1px solid black
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <button id="text">Add Text</button>
    
    <input type="button" id="addImage" value="Add Web IMG"/><input type="file" id="imgLoader"/>
    <br>upload json<input type="file" id="jsonload" />
    
    <br/><br/>
    
    <canvas id='c' width=500 height=500></canvas>
    
    <br/>
    
    <button id='canvas2json'>2JSON</button>
    <button id='loadJson2Canvas'>2CANVAS</button>
    
    <br/><br/>
    
    <textarea id='myTextArea' onfocus="this.select();" onmouseup="return false;"></textarea>