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

Improved arcs

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-12-31 13:47:40 -07:00
parent acb7ae3096
commit 9817caf4f1
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
links/main.css
View File

@ -4,8 +4,8 @@ body { background:#fff; padding:50px;}
#dotgrid .marker { width:2px; height:2px; background:#999; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
#dotgrid .marker.block { background:black; width:4px; height:4px; margin-left:-2px; margin-top:-2px; }
#dotgrid #cursor { width:6px; height:6px; background:red; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
#dotgrid #cursor_from { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px; left:-100px;}
#dotgrid #cursor_to { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px; left:-100px;}
#dotgrid #cursor_from { width:6px; height:6px; background:white; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:10px; left:-100px;border:2px solid black;}
#dotgrid #cursor_to { width:6px; height:6px; background:white; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:10px; left:-100px; border:2px solid black;}
input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}
.vector { position:relative; z-index:900; }
pre { font-family:courier; font-size:11px; position:fixed; left:0px; bottom:20px;}

15
scripts/dotgrid.js
View File

@ -118,7 +118,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
s.setAttribute('x2', -to[0]);
s.setAttribute('y2', to[1]);
s.setAttribute('stroke', "#000000");
s.setAttribute('stroke-width', "5");
s.setAttribute('stroke-width', "3");
s.setAttribute('stroke-linecap', "round");
vector_element.appendChild(s);
@ -131,9 +131,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
if(from === null || to === null){ return; }
var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A15,15 0 "+orientation+" "+(-to[0])+","+(to[1])+"");
s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A"+this.grid_width+","+this.grid_height+" 0 "+orientation+" "+(-to[0])+","+(to[1])+"");
s.setAttribute('stroke', "#000000");
s.setAttribute('stroke-width', "5");
s.setAttribute('stroke-width', "3");
s.setAttribute('fill', "none");
s.setAttribute('stroke-linecap', "round");
vector_element.appendChild(s);
@ -166,6 +166,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
vector_element.removeChild(vector_element.lastChild);
}
this.export = function()
{
var w = window.open('about:blank','image from canvas');
w.document.write("<title>Export</title>");
w.document.appendChild(vector_element);
}
// Normalizers
this.position_in_grid = function(x,y)
@ -176,7 +183,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.position_on_grid = function(x,y)
{
x = parseInt(x/this.grid_width) * this.grid_width - (this.grid_width/2);
y = parseInt(y/this.grid_height) * this.grid_height - (this.grid_height/2);
y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2);
return [x,y];
}
}

3
scripts/keyboard.js
View File

@ -2,13 +2,14 @@ function Keyboard()
{
this.listen = function(event)
{
console.log(event);
console.log(event.keyCode);
switch (event.keyCode) {
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
case 68 : dotgrid.draw_line(); break;
case 70 : dotgrid.reset(); break;
case 71 : dotgrid.erase(); break;
case 81 : dotgrid.export(); break;
}
}
}