Started Live version

2018-07-17 13:14:27 +12:00
parent 2d141a8806
commit 0b68bf94d6
16 changed files with 1544 additions and 1 deletions
--- a/web/scripts/renderer.js
+++ b/web/scripts/renderer.js
@@ -0,0 +1,87 @@
+function Renderer()
+{
+  // Create SVG parts
+  this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
+  this.svg_el.setAttribute("baseProfile","full");
+  this.svg_el.setAttribute("version","1.1");
+  this.svg_el.style.fill = "none";
+
+  this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
+  this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
+  this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
+
+  this.svg_el.appendChild(this.layer_3);
+  this.svg_el.appendChild(this.layer_2);
+  this.svg_el.appendChild(this.layer_1);
+
+  this.refresh = function()
+  {
+    this.svg_el.setAttribute("width",dotgrid.tool.settings.size.width+"px");
+    this.svg_el.setAttribute("height",dotgrid.tool.settings.size.height+"px");
+    this.svg_el.style.width = dotgrid.tool.settings.size.width;
+    this.svg_el.style.height = dotgrid.tool.settings.size.height;
+    this.svg_el.style.strokeWidth = dotgrid.tool.style().thickness;
+
+    var styles = dotgrid.tool.styles
+    var paths = dotgrid.tool.paths()
+
+    this.layer_1.style.strokeWidth = styles[0].thickness;
+    this.layer_1.style.strokeLinecap = styles[0].strokeLinecap;
+    this.layer_1.style.strokeLinejoin = styles[0].strokeLinejoin;
+    this.layer_1.style.stroke = styles[0].color;
+    this.layer_1.style.fill = styles[0].fill;
+    this.layer_1.setAttribute("d",paths[0])
+  
+    this.layer_2.style.strokeWidth = styles[1].thickness;
+    this.layer_2.style.strokeLinecap = styles[1].strokeLinecap;
+    this.layer_2.style.strokeLinejoin = styles[1].strokeLinejoin;
+    this.layer_2.style.stroke = styles[1].color;
+    this.layer_2.style.fill = styles[1].fill;
+    this.layer_2.setAttribute("d",paths[1])
+    
+    this.layer_3.style.strokeWidth = styles[2].thickness;
+    this.layer_3.style.strokeLinecap = styles[2].strokeLinecap;
+    this.layer_3.style.strokeLinejoin = styles[2].strokeLinejoin;
+    this.layer_3.style.stroke = styles[2].color;
+    this.layer_3.style.fill = styles[2].fill; 
+    this.layer_3.setAttribute("d",paths[2])   
+  }
+
+  this.to_png = function(size = dotgrid.tool.settings.size,callback = dotgrid.render)
+  {
+    this.refresh();
+
+    var xml = new XMLSerializer().serializeToString(this.svg_el);
+    var svg64 = btoa(xml);
+    var b64Start = 'data:image/svg+xml;base64,';
+    var image64 = b64Start + svg64;
+    var img = new Image;
+
+    var canvas = document.createElement("canvas");
+
+    canvas.width = size.width; 
+    canvas.height = size.height;
+
+    var ctx = canvas.getContext('2d');
+
+    img.onload = function(){
+      ctx.drawImage(img, 0, 0, size.width, size.height);
+      var data = canvas.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, "");
+      dotgrid.renderer.to_png_ready(callback, new Buffer(data, 'base64'),size)
+    };
+    img.src = image64;
+  }
+
+  this.to_png_ready = function(callback, buffer, size)
+  {
+    callback(null,buffer,size)
+  }
+
+  this.to_svg = function()
+  {
+    this.refresh();
+
+    return this.svg_el.outerHTML;
+  }
+}