Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added UI for thickness and linecap settings

Browse Source
This commit is contained in:
eelfroth 2017-01-06 02:06:34 +01:00
parent 21ebcbf88c
commit 4cfc67d416
3 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
links/main.css
View File

@ -8,4 +8,8 @@ body { background:#fff; padding:50px;}
#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;}
pre { font-family:courier; font-size:11px; color:#000; position:fixed; bottom:20px;}
.reference { left:0; }
.settings { right:20px; text-align:right; }
.settings input { display:inline; background:#fff; width:4em; }
.settings select { display:inline; background:#fff; }

12
scripts/dotgrid.js
View File

@ -227,4 +227,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2);
return [parseInt(x),parseInt(y)];
}
// Settings
this.update_style = function(attribute, value) {
switch(attribute) {
case "strokeWidth":
vector_element.style.strokeWidth = value;
break;
case "strokeLinecap":
vector_element.style.strokeLinecap = value;
}
}
}

15
template.interface.html
View File

@ -9,7 +9,8 @@
<title>Dotgrid(Interface)</title>
</head>
<body>
<pre>
<body>
<pre class="reference">
q <b>CLEAR</b>
w <b>DELETE LAST</b>
e <b>EXPORT</b>
@ -23,6 +24,18 @@
x <b>CIRCLE</b>
c <b>--</b>
</pre>
<pre class="settings">
<b>THICKNESS</b> <input type="number" value=1 min="0" step="0.1"
oninput="dotgrid.update_style('strokeWidth', this.value);">
<b>LINECAP</b> <select
onchange="dotgrid.update_style('strokeLinecap', this.value);">
<option value="butt">butt</option>
<option value="round">round</option>
<option value="square">square</option>
</select>
</pre>
<script>
dotgrid = new Dotgrid(320,568,31,61,6,6, 1,"square","#000000");
dotgrid.install();