Fixed issue with arcs
This commit is contained in:
parent
35ceb74763
commit
d14b375d53
11
index.html
11
index.html
|
@ -9,10 +9,13 @@
|
||||||
<title>Dotgrid</title>
|
<title>Dotgrid</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<input id="line" type="button" value="line"/>
|
<pre>
|
||||||
<input id="arc_c" type="button" value="arc_c"/>
|
aA <b>ARC CLOCKWISE</b>
|
||||||
<input id="arc_a" type="button" value="arc_a"/>
|
sS <b>ARC COUNTERWISE</b>
|
||||||
<input id="reseter" type="button" value="reseter"/>
|
d <b>LINE</b>
|
||||||
|
f <b>CLEAR</b>
|
||||||
|
g <b>DELETE LAST</b>
|
||||||
|
</pre>
|
||||||
<script type="text/javascript" src="scripts/init.js"></script>
|
<script type="text/javascript" src="scripts/init.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -6,4 +6,5 @@ body { background:#fff; padding:50px;}
|
||||||
#dotgrid #cursor_from { width:6px; height:6px; background:black; 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;}
|
||||||
#dotgrid #cursor_to { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
|
#dotgrid #cursor_to { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
|
||||||
input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}
|
input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}
|
||||||
.vector { position:relative; z-index:900; }
|
.vector { position:relative; z-index:900; }
|
||||||
|
pre { font-family:courier; font-size:11px; position:fixed; left:20px; bottom:20px;}
|
|
@ -130,33 +130,10 @@ function Dotgrid(width,height,grid_x,grid_y)
|
||||||
reset();
|
reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.draw_arc_c = function()
|
this.draw_arc = function(orientation)
|
||||||
{
|
|
||||||
draw_arc_c();
|
|
||||||
}
|
|
||||||
|
|
||||||
draw_arc_c = function()
|
|
||||||
{
|
{
|
||||||
var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A15,15 0 0,1 "+(-to[0])+","+(to[1])+"");
|
s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A15,15 0 "+orientation+" "+(-to[0])+","+(to[1])+"");
|
||||||
s.setAttribute('stroke', "#000000");
|
|
||||||
s.setAttribute('stroke-width', "5");
|
|
||||||
s.setAttribute('fill', "none");
|
|
||||||
s.setAttribute('stroke-linecap', "round");
|
|
||||||
vector_element.appendChild(s);
|
|
||||||
|
|
||||||
reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.draw_arc_a = function()
|
|
||||||
{
|
|
||||||
draw_arc_a();
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw_arc_a()
|
|
||||||
{
|
|
||||||
var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
||||||
s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A15,15 0 1,0 "+(-to[0])+","+(to[1])+"");
|
|
||||||
s.setAttribute('stroke', "#000000");
|
s.setAttribute('stroke', "#000000");
|
||||||
s.setAttribute('stroke-width', "5");
|
s.setAttribute('stroke-width', "5");
|
||||||
s.setAttribute('fill', "none");
|
s.setAttribute('fill', "none");
|
||||||
|
|
|
@ -2,11 +2,10 @@ function Keyboard()
|
||||||
{
|
{
|
||||||
this.listen = function(event)
|
this.listen = function(event)
|
||||||
{
|
{
|
||||||
console.log(event.keyCode);
|
console.log(event);
|
||||||
|
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case 65 : dotgrid.draw_arc_a(); break;
|
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
|
||||||
case 83 : dotgrid.draw_arc_c(); break;
|
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
|
||||||
case 68 : dotgrid.draw_line(); break;
|
case 68 : dotgrid.draw_line(); break;
|
||||||
case 70 : dotgrid.reset(); break;
|
case 70 : dotgrid.reset(); break;
|
||||||
case 71 : dotgrid.erase(); break;
|
case 71 : dotgrid.erase(); break;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user