Added close stroke icon

This commit is contained in:
Devine Lu Linvega 2017-11-06 08:38:14 +13:00
parent 0e32be5314
commit c7046e00b7
7 changed files with 19 additions and 44 deletions

View File

@ -1 +1 @@
<svg class="vector" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" style="width: 300px; height: 300px; stroke: rgb(0, 0, 0); stroke-width: 10px; fill: none; stroke-linecap: square;"><path d="M150,50 A100,100 0 0,1 250,150 A-100,100 0 0,1 150,250 A-100,-100 0 0,1 50,150 "></path></svg> <svg class="vector" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" style="width: 300px; height: 300px; stroke: rgb(0, 0, 0); stroke-width: 10px; fill: none; stroke-linecap: square;"><path d="M50,50 L120,120 M250,250 L180,180 "></path></svg>

Before

Width:  |  Height:  |  Size: 335 B

After

Width:  |  Height:  |  Size: 290 B

View File

@ -103,6 +103,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
if(o == "arc_c"){ this.draw_arc("0,1"); } if(o == "arc_c"){ this.draw_arc("0,1"); }
if(o == "arc_r"){ this.draw_arc("0,0"); } if(o == "arc_r"){ this.draw_arc("0,0"); }
if(o == "bezier"){ this.draw_bezier(); } if(o == "bezier"){ this.draw_bezier(); }
if(o == "close"){ this.draw_close(); }
if(o == "export"){ this.export(); } if(o == "export"){ this.export(); }
} }
@ -248,6 +249,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw_close = function() this.draw_close = function()
{ {
if(this.segments.length == 0){ return; } if(this.segments.length == 0){ return; }
if(this.segments[this.segments.length-1].name == "close"){ return; }
this.segments.push(new Path_Close()); this.segments.push(new Path_Close());
@ -255,45 +257,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
reset(); reset();
} }
this.draw_dot = function()
{
var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
s.setAttribute("cx",-from[0]);
s.setAttribute("cy",from[1]);
s.setAttribute("r","2");
s.setAttribute("fill","black");
this.svg_el.appendChild(s);
reset();
}
this.draw_circle = function()
{
if(from === null || to === null){ return; }
var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
s.setAttribute("cx",-from[0]);
s.setAttribute("cy",from[1]);
s.setAttribute("r",(from[0] - to[0]));
this.svg_el.appendChild(s);
reset();
}
this.draw_rect = function()
{
if(from === null || to === null){ return; }
var s = document.createElementNS("http://www.w3.org/2000/svg", "rect");
s.setAttribute("x",-from[0]);
s.setAttribute("y",from[1]);
s.setAttribute("width",Math.abs(to[0]) - Math.abs(from[0]));
s.setAttribute("height",Math.abs(to[1]) - Math.abs(from[1]));
this.svg_el.appendChild(s);
reset();
}
this.reset = function() this.reset = function()
{ {
reset(); reset();
@ -357,6 +320,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
html += "<img title='bezier' src='media/icons/bezier.svg' class='icon inactive'/>"; html += "<img title='bezier' src='media/icons/bezier.svg' class='icon inactive'/>";
} }
if(this.segments.length > 0 && this.segments[this.segments.length-1].name != "close"){
html += "<img data-operation='close' title='close' src='media/icons/close.svg' class='icon'/>";
}
else{
html += "<img title='close' src='media/icons/close.svg' class='icon inactive'/>";
}
if(this.segments.length > 0){ if(this.segments.length > 0){
html += "<img data-operation='export' title='export' src='media/icons/export.svg' class='icon right'/>"; html += "<img data-operation='export' title='export' src='media/icons/export.svg' class='icon right'/>";
} }

View File

@ -3,6 +3,7 @@ function Keyboard()
this.listen = function(event) this.listen = function(event)
{ {
console.log(event.keyCode) console.log(event.keyCode)
switch (event.keyCode) { switch (event.keyCode) {
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break; case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break; case 65 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
@ -19,10 +20,6 @@ function Keyboard()
case 8 : dotgrid.erase(); break; case 8 : dotgrid.erase(); break;
case 69 : dotgrid.export(); break; case 69 : dotgrid.export(); break;
case 90 : dotgrid.draw_dot(); break;
case 88 : dotgrid.draw_circle(); break;
case 67 : dotgrid.draw_rect(); break;
case 38 : dotgrid.mod_move(0,-1); break; case 38 : dotgrid.mod_move(0,-1); break;
case 40 : dotgrid.mod_move(0,1); break; case 40 : dotgrid.mod_move(0,1); break;
case 37 : dotgrid.mod_move(1,0); break; case 37 : dotgrid.mod_move(1,0); break;

View File

@ -1,5 +1,7 @@
function Path_Arc(from,to,orientation,end) function Path_Arc(from,to,orientation,end)
{ {
this.name = "arc";
this.from = from; this.from = from;
this.to = to; this.to = to;
this.orientation = orientation; this.orientation = orientation;

View File

@ -1,5 +1,7 @@
function Path_Bezier(from,to,end) function Path_Bezier(from,to,end)
{ {
this.name = "bezier";
this.from = from; this.from = from;
this.to = to; this.to = to;
this.end = end; this.end = end;

View File

@ -1,5 +1,7 @@
function Path_Close() function Path_Close()
{ {
this.name = "close";
this.to_segment = function(prev) this.to_segment = function(prev)
{ {
return "Z "; return "Z ";

View File

@ -1,5 +1,7 @@
function Path_Line(from,to,end = null) function Path_Line(from,to,end = null)
{ {
this.name = "line";
this.from = from; this.from = from;
this.to = to; this.to = to;
this.end = end; this.end = end;