Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Standard

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-10-04 11:27:40 +12:00
parent a8628139a0
commit fce187e04c
12 changed files with 1185 additions and 1366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
desktop/sources/scripts/renderer.js
View File

@@ -1,117 +1,111 @@
'use strict';
'use strict'
function Renderer()
{
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.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.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.svg_el.appendChild(this.layer_3)
this.svg_el.appendChild(this.layer_2)
this.svg_el.appendChild(this.layer_1)
this.update = function()
{
this.svg_el.setAttribute("width",(dotgrid.tool.settings.size.width-(5))+"px");
this.svg_el.setAttribute("height",(dotgrid.tool.settings.size.height+(10))+"px");
this.svg_el.style.width = (dotgrid.tool.settings.size.width-(5));
this.svg_el.style.height = dotgrid.tool.settings.size.height+(10);
this.svg_el.style.strokeWidth = dotgrid.tool.style().thickness;
this.update = function () {
this.svg_el.setAttribute('width', (dotgrid.tool.settings.size.width - (5)) + 'px')
this.svg_el.setAttribute('height', (dotgrid.tool.settings.size.height + (10)) + 'px')
this.svg_el.style.width = (dotgrid.tool.settings.size.width - (5))
this.svg_el.style.height = dotgrid.tool.settings.size.height + (10)
this.svg_el.style.strokeWidth = dotgrid.tool.style().thickness
let styles = dotgrid.tool.styles
let 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.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)
{
if(!dialog){ return this.to_png_web(size); }
this.to_png = function (size = dotgrid.tool.settings.size, callback = dotgrid.render) {
if (!dialog) { return this.to_png_web(size) }
this.update();
this.update()
let xml = new XMLSerializer().serializeToString(this.svg_el);
let svg64 = btoa(xml);
let b64Start = 'data:image/svg+xml;base64,';
let image64 = b64Start + svg64;
let img = new Image;
let xml = new XMLSerializer().serializeToString(this.svg_el)
let svg64 = btoa(xml)
let b64Start = 'data:image/svg+xml;base64,'
let image64 = b64Start + svg64
let img = new Image()
let canvas = document.createElement("canvas");
let canvas = document.createElement('canvas')
canvas.width = (size.width)*2;
canvas.height = (size.height+30)*2;
canvas.width = (size.width) * 2
canvas.height = (size.height + 30) * 2
let ctx = canvas.getContext('2d');
let ctx = canvas.getContext('2d')
img.onload = function(){
ctx.drawImage(img, 0, 0, (size.width)*2, (size.height+30)*2);
let data = canvas.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, "");
dotgrid.renderer.to_png_ready(callback, new Buffer(data, 'base64'),size)
};
img.src = image64;
img.onload = function () {
ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height + 30) * 2)
let 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_png_ready = function (callback, buffer, size) {
callback(null, buffer, size)
}
this.to_png_web = function(size)
{
if(dotgrid.tool.length() < 1){ console.warn('Nothing to render'); return; }
this.update();
this.to_png_web = function (size) {
if (dotgrid.tool.length() < 1) { console.warn('Nothing to render'); return }
this.update()
let xml = new XMLSerializer().serializeToString(this.svg_el);
let svg64 = btoa(xml);
let b64Start = 'data:image/svg+xml;base64,';
let image64 = b64Start + svg64;
let xml = new XMLSerializer().serializeToString(this.svg_el)
let svg64 = btoa(xml)
let b64Start = 'data:image/svg+xml;base64,'
let image64 = b64Start + svg64
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
let win = window.open('about:blank','image from canvas');
let img = new Image;
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
canvas.width = size.width*2;
canvas.height = size.height*2;
let win = window.open('about:blank', 'image from canvas')
let img = new Image()
img.onload = function(){
ctx.drawImage(img, 0, 0, size.width*2, size.height*2);
win.document.write(`<style>body { background:${dotgrid.theme.active.background}}</style><img width='${size.width/2}' height='${size.height/2}' src='${canvas.toDataURL("image/png")}' alt='from canvas'/>`);
};
img.src = image64;
canvas.width = size.width * 2
canvas.height = size.height * 2
img.onload = function () {
ctx.drawImage(img, 0, 0, size.width * 2, size.height * 2)
win.document.write(`<style>body { background:${dotgrid.theme.active.background}}</style><img width='${size.width / 2}' height='${size.height / 2}' src='${canvas.toDataURL('image/png')}' alt='from canvas'/>`)
}
img.src = image64
}
this.to_svg = function()
{
this.update();
this.to_svg = function () {
this.update()
return this.svg_el.outerHTML;
return this.svg_el.outerHTML
}
}
}