diff --git a/links/main.css b/links/main.css index 5990b34..b9cdff8 100644 --- a/links/main.css +++ b/links/main.css @@ -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;} \ No newline at end of file diff --git a/scripts/dotgrid.js b/scripts/dotgrid.js index e805867..14451d3 100644 --- a/scripts/dotgrid.js +++ b/scripts/dotgrid.js @@ -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("Export"); + 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]; } } \ No newline at end of file diff --git a/scripts/keyboard.js b/scripts/keyboard.js index decd424..eb758ca 100644 --- a/scripts/keyboard.js +++ b/scripts/keyboard.js @@ -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; } } }