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

Implemented PNG export

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-11-10 08:47:06 +13:00
parent 2fde8ef16d
commit 86aaef5c81
5 changed files with 65 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sources/index.html
View File

@ -7,6 +7,8 @@
<script type="text/javascript" src="scripts/path_close.js"></script>
<script type="text/javascript" src="scripts/dotgrid.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script>
<script type="text/javascript" src="scripts/guide.js"></script>
<script type="text/javascript" src="scripts/render.js"></script>
<script type="text/javascript" src="scripts/theme.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>

14
sources/links/main.css
View File

@ -1,18 +1,18 @@
body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit-user-select: none;-webkit-app-region: drag; overflow: hidden;}
#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag;}
#dotgrid .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
#dotgrid #cursor { width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;}
#dotgrid #cursor_from { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;}
#dotgrid #cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
#dotgrid #cursor_end { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
#cursor { width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;}
#cursor_from { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;}
#cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
#cursor_end { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
#interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase; margin-top:20px;-webkit-app-region: no-drag;}
#guide { position: absolute;top: 30px;left: calc(50vw - 160px);padding: 10px; width: 300px;height: 300px;}
#guide .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
#render { display: none }
.icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 0.5}
.icon.right { float:right;}
.icon.inactive { opacity: 0.1 !important }
.icon:hover { cursor: pointer; opacity: 1 }
svg.vector { z-index: 1000;position: relative }

19
sources/scripts/dotgrid.js
View File

@ -38,6 +38,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.mirror = false;
this.fill = false;
this.guide = new Guide();
this.render = new Render();
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.segments = [];
this.interface = document.createElement("div");
@ -47,17 +50,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
{
document.body.appendChild(this.element);
document.body.appendChild(this.interface);
// Markers
for (var x = this.grid_x; x >= 0; x--) {
for (var y = this.grid_y; y >= 0; y--) {
var marker = document.createElement("div");
marker.setAttribute("class",(x % this.block_x == 0 && y % this.block_y == 0 ? "marker bm" : "marker bl"));
marker.style.left = parseInt(x * this.grid_width + (this.grid_width/2)) +5;
marker.style.top = parseInt(y * this.grid_height + (this.grid_height/2)) +5;
this.element.appendChild(marker);
}
}
document.body.appendChild(this.guide.el);
document.body.appendChild(this.render.el);
// Cursors
this.cursor = document.createElement("div");
@ -104,6 +98,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw();
this.theme.start();
this.guide.start();
}
// Cursor
@ -254,6 +249,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.offset_el.setAttribute("transform","translate("+(this.offset.x)+","+(this.offset.y)+")")
this.render.draw();
this.update_interface();
}
@ -354,6 +350,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
fs.writeFile(fileName+".svg", dotgrid.svg_el.outerHTML, (err) => {
if(err){ alert("An error ocurred creating the file "+ err.message); return; }
});
fs.writeFile(fileName+'.png', dotgrid.render.buffer());
});
}

21
sources/scripts/guide.js Normal file
View File

@ -0,0 +1,21 @@
function Guide()
{
this.el = document.createElement("div");
// Guide
this.el.id = "guide";
this.start = function()
{
// Markers
for (var x = dotgrid.grid_x; x >= 0; x--) {
for (var y = dotgrid.grid_y; y >= 0; y--) {
var marker = document.createElement("div");
marker.setAttribute("class",(x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0 ? "marker bm" : "marker bl"));
marker.style.left = parseInt(x * dotgrid.grid_width + (dotgrid.grid_width/2)) +5;
marker.style.top = parseInt(y * dotgrid.grid_height + (dotgrid.grid_height/2)) +5;
this.el.appendChild(marker);
}
}
}
}

27
sources/scripts/render.js Normal file
View File

@ -0,0 +1,27 @@
function Render()
{
this.el = document.createElement("canvas"); this.el.id = "render";
this.img = document.createElement("img");
this.el.width = 300; this.el.height = 300;
this.draw = function()
{
var xml = new XMLSerializer().serializeToString(dotgrid.svg_el);
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';
var image64 = b64Start + svg64;
this.img.src = image64;
this.el.getContext('2d').clearRect(0, 0, 300, 300);
this.el.getContext('2d').drawImage(this.img, 0, 0);
}
this.buffer = function()
{
var fs = require('fs');
var data = this.el.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
return buf
}
}