All geek questions in one place

Loading with JSON with dynamic templates

I am trying to save the Fabric.js canvas and reload it using loadFromJson . But I get the error pattern SourceCanvas not defined. I thought I should make it global, so I removed var. But when I fill in another new shape with a new template, this new template applies to all previously drawn shapes that have old patterns on the canvas. Please help me with dynamic templates.

 <!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>
+4
source share
1 answer

This may be the last answer, but I decided that I can answer it, as this is one of the first blows when searching for this problem on Google, and I also have this problem.

The problem is that the original function is serialized as code, for example:

 "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 },

The best thing to do is to create your own object that extends the form you need and rewrite the toObject () functions and initialize. This will allow you to save and load the necessary user data.

It would be something like this: http://jsfiddle.net/Ly9YY/ (this code does not seem to work)

0
source

Source: https://habr.com/ru/post/1498302/

More articles:


All Articles