Загрузить с JSON с динамическими шаблонами

Я пытаюсь сохранить холст Fabric.js и перезагрузить его с помощью loadFromJson. Но я получаю шаблон ошибкиSourceCanvas не определен. Я думал, что должен сделать это глобальным, поэтому я удалил var. Но когда я заполняю какую-то новую новую фигуру новым паттерном, этот новый шаблон применяется ко всем ранее нарисованным фигурам, которые имеют старые шаблоны на холсте. Просьба помочь мне с динамическими узорами.Загрузить с JSON с динамическими шаблонами

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    <title>Dynamic patterns | Fabric.js Demos</title> 




    <!--[if lt IE 9]> 
     <script src="../lib/excanvas.js"></script> 
    <![endif]--> 

    <!-- <script src="base/prism.js"></script> --> 
    <script src="http://fabricjs.com/lib/fabric.js"></script> 
    </head> 
    <body> 





    <div id="bd-wrapper"> 
     <h2><span>Fabric.js demos</span>Dynamic patterns</h2> 



<div> 
    <p> 
    <label>Repeat pattern?</label> 
    <input type="checkbox" id="img-repeat" checked> 
    </p> 
    <p> 
    <label>Pattern image width</label> 
    <input type="range" min="50" max="1000" value="100" id="img-width"> 
    </p> 
    <p> 
    <label>Pattern left offset</label> 
    <input type="range" min="0" max="500" value="0" id="img-offset-x"> 
    </p> 
    <p> 
    <label>Pattern top offset</label> 
    <input type="range" min="0" max="500" value="0" id="img-offset-y"> 
    </p> 
    <br> 
    <p> 
    <label>Pattern image angle</label> 
    <input type="range" min="-90" max="90" value="0" id="img-angle"> 
    </p> 
    <p> 
    <label>Pattern image padding</label> 
    <input type="range" min="-50" max="50" value="0" id="img-padding"> 
    </p> 

</div> 
<div><button id="toJson">TOJSON</button></div> 
<div><button id="fromJson">LoadFromJSON</button></div> 
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas> 
<script> 






var canvas = new fabric.Canvas('c'); 
var padding = 0; 

fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) { 

    img.scaleToWidth(100).set({ 
    originX: 'left', 
    originY: 'top' 
    }); 

    var patternSourceCanvas = new fabric.StaticCanvas(); 
    patternSourceCanvas.add(img); 

    var pattern = new fabric.Pattern({ 
    source: function() { 
     patternSourceCanvas.setDimensions({ 
     width: img.getWidth() + padding, 
     height: img.getHeight() + padding 
     }); 
     return patternSourceCanvas.getElement(); 
    }, 
    repeat: 'repeat' 
    }); 

    canvas.add(new fabric.Polygon([ 
    {x: 185, y: 0}, 
    {x: 250, y: 100}, 
    {x: 385, y: 170}, 
    {x: 0, y: 245} ], { 
     left: 220, 
     top: 200, 
     angle: -30, 
     fill: pattern 
    })); 




    document.getElementById('img-width').onchange = function() { 
    img.scaleToWidth(parseInt(this.value, 10)); 
    canvas.renderAll(); 
    }; 
    document.getElementById('img-angle').onchange = function() { 
    img.setAngle(this.value); 
    canvas.renderAll(); 
    }; 
    document.getElementById('img-padding').onchange = function() { 
    padding = parseInt(this.value, 10); 
    canvas.renderAll(); 
    }; 
    document.getElementById('img-offset-x').onchange = function() { 
    pattern.offsetX = parseInt(this.value, 10); 
    canvas.renderAll(); 
    }; 
    document.getElementById('img-offset-y').onchange = function() { 
    pattern.offsetY = parseInt(this.value, 10); 
    canvas.renderAll(); 
    }; 
    document.getElementById('img-repeat').onclick = function() { 
    pattern.repeat = this.checked ? 'repeat' : 'no-repeat'; 
    canvas.renderAll(); 
    }; 
}); 
document.getElementById('toJson').onclick = function() { 
    jsonData = JSON.stringify(canvas); 
} 
document.getElementById('fromJson').onclick = function() { 
    canvas.clear(); 
    canvas.loadFromJSON(jsonData); 
    canvas.renderAll(); 

} 

</script> 


</body> 
</html>

источник

2013-08-22 John

Это может быть последний ответ когда-либо, но я полагал, что я мог бы также ответить на него, так как это один из первых хитов при поиске этого вопроса на Google, и у меня есть этот точный вопрос тоже.

Проблема заключается в том, что функция источника получает сериализовать как код, например:

"fill":{ 
      "source":"function() {\r\n\t     patternSourceCanvas.setDimensions({\r\n\t      width: img.getWidth(),\r\n\t      height: img.getHeight(),\r\n\t     });\r\n\t     return patternSourceCanvas.getElement();\r\n\t    }", 
      "repeat":"repeat", 
      "offsetX":0, 
      "offsetY":0 
     },

Лучший способ обойти это до сих пор является, чтобы создать свой собственный объект, который расширяет форму, что вам нужно, и переписана функции toObject() и инициализации. Это позволит вам сохранить и загрузить необходимые пользовательские данные.

Это было бы чем-то вроде этого: http://jsfiddle.net/Ly9YY/ (этот код не работает)

источник

2014-05-06 19:22:04 Dan

Загрузить с JSON с динамическими шаблонами

ответ

Смежные вопросы