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_r"){ this.draw_arc("0,0"); }
|
||||
if(o == "bezier"){ this.draw_bezier(); }
|
||||
if(o == "close"){ this.draw_close(); }
|
||||
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()
|
||||
{
|
||||
if(this.segments.length == 0){ return; }
|
||||
if(this.segments[this.segments.length-1].name == "close"){ return; }
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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()
|
||||
{
|
||||
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'/>";
|
||||
}
|
||||
|
||||
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){
|
||||
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)
|
||||
{
|
||||
console.log(event.keyCode)
|
||||
|
||||
switch (event.keyCode) {
|
||||
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); 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 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 40 : dotgrid.mod_move(0,1); break;
|
||||
case 37 : dotgrid.mod_move(1,0); break;
|
||||
|
@ -1,5 +1,7 @@
|
||||
function Path_Arc(from,to,orientation,end)
|
||||
{
|
||||
this.name = "arc";
|
||||
|
||||
this.from = from;
|
||||
this.to = to;
|
||||
this.orientation = orientation;
|
||||
|
@ -1,5 +1,7 @@
|
||||
function Path_Bezier(from,to,end)
|
||||
{
|
||||
this.name = "bezier";
|
||||
|
||||
this.from = from;
|
||||
this.to = to;
|
||||
this.end = end;
|
||||
|
@ -1,5 +1,7 @@
|
||||
function Path_Close()
|
||||
{
|
||||
this.name = "close";
|
||||
|
||||
this.to_segment = function(prev)
|
||||
{
|
||||
return "Z ";
|
||||
|
@ -1,5 +1,7 @@
|
||||
function Path_Line(from,to,end = null)
|
||||
{
|
||||
this.name = "line";
|
||||
|
||||
this.from = from;
|
||||
this.to = to;
|
||||
this.end = end;
|
||||
|
Loading…
Reference in New Issue
Block a user