Added close stroke icon
This commit is contained in:
parent
0e32be5314
commit
c7046e00b7
@ -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 |
@ -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'/>";
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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 ";
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user