BETTER GRIDS
This commit is contained in:
parent
fd06dceeb2
commit
7165e7339f
3 changed files with 131 additions and 26 deletions
|
@ -12,10 +12,40 @@
|
||||||
|
|
||||||
<div id="mySidepanel" class="sidepanel">
|
<div id="mySidepanel" class="sidepanel">
|
||||||
<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">×</a>
|
<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">×</a>
|
||||||
<a href="#">About</a>
|
|
||||||
<a href="#">Services</a>
|
<div class="section">
|
||||||
<a href="#">Clients</a>
|
<span class="title">Grid</span>
|
||||||
<a href="#">Contact</a>
|
<div class="prop gridline">
|
||||||
|
<div class="item">
|
||||||
|
<label for="mwidth" class="input">Line width</label>
|
||||||
|
<input type="number" id="mwidth" value="4">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<label for="mwidth" class="input">Seperation</label>
|
||||||
|
<input type="number" id="mwidth" value="100">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<label for="mwidth" class="input">Color</label>
|
||||||
|
<input type="text" id="mwidth" value="#333">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="prop gridline">
|
||||||
|
<div class="item">
|
||||||
|
<label for="mwidth" class="input">Line width</label>
|
||||||
|
<input type="number" id="mwidth" value="2">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<label for="mwidth" class="input">Seperation</label>
|
||||||
|
<input type="number" id="mwidth" value="20">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<label for="mwidth" class="input">Color</label>
|
||||||
|
<input type="text" id="mwidth" value="#333">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="canvasWrapper" class="wrapper">
|
<div id="canvasWrapper" class="wrapper">
|
||||||
|
@ -33,7 +63,7 @@
|
||||||
if (nav_open) {
|
if (nav_open) {
|
||||||
document.getElementById("mySidepanel").style.width = "0";
|
document.getElementById("mySidepanel").style.width = "0";
|
||||||
} else {
|
} else {
|
||||||
document.getElementById("mySidepanel").style.width = "250px";
|
document.getElementById("mySidepanel").style.width = "350px";
|
||||||
}
|
}
|
||||||
nav_open = !nav_open;
|
nav_open = !nav_open;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,25 @@
|
||||||
|
|
||||||
|
let gridlineEls:any;
|
||||||
|
let gridlineNeedsUpdate = true;
|
||||||
|
|
||||||
|
function get_line_widths(): string[][] {
|
||||||
|
if (gridlineNeedsUpdate) {
|
||||||
|
gridlineEls = document.getElementsByClassName("gridline");
|
||||||
|
gridlineNeedsUpdate = false;
|
||||||
|
}
|
||||||
|
const out: string[][] = [[], [], []];
|
||||||
|
for(let el of <any[]>gridlineEls) {
|
||||||
|
let i = 0;
|
||||||
|
for( let c of el.getElementsByTagName('input')) {
|
||||||
|
out[i].push(
|
||||||
|
c.value
|
||||||
|
);
|
||||||
|
i += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
function main() {
|
function main() {
|
||||||
const canvas = <HTMLCanvasElement>document.getElementById("canvas");
|
const canvas = <HTMLCanvasElement>document.getElementById("canvas");
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
|
@ -9,44 +30,52 @@ function main() {
|
||||||
canvas.width = width;
|
canvas.width = width;
|
||||||
canvas.height = height;
|
canvas.height = height;
|
||||||
|
|
||||||
ctx.translate(width / 2, height / 2);
|
function draw() {
|
||||||
|
ctx.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
|
||||||
ctx.strokeStyle = "#333"
|
ctx.translate(width / 2, height / 2);
|
||||||
draw_grid(
|
|
||||||
ctx, [width, 100, 20], [width / 2, height / 2], [width, height],
|
|
||||||
4, 0.30
|
|
||||||
);
|
|
||||||
ctx.fillStyle = "#ff5f00";
|
|
||||||
|
|
||||||
ctx.fillRect(0, 0, 100, 100);
|
ctx.strokeStyle = "#333";
|
||||||
|
draw_grid(ctx, get_line_widths(), [width / 2, height / 2], [width, height]);
|
||||||
|
ctx.fillStyle = "#ff5f00";
|
||||||
|
|
||||||
|
ctx.fillRect(0, 0, 100, 100);
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
requestAnimationFrame(draw);
|
||||||
|
}
|
||||||
|
|
||||||
console.log("hallo");
|
console.log("hallo");
|
||||||
|
draw();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function draw_grid(
|
function draw_grid(
|
||||||
ctx: CanvasRenderingContext2D,
|
ctx: CanvasRenderingContext2D,
|
||||||
lines: number[], // number of pixels between lines, with smaller gettings lines
|
lines: string[][], // number of pixels between lines, with smaller gettings lines
|
||||||
transform: [number, number],
|
transform: [number, number],
|
||||||
size: [number, number],
|
size: [number, number]) {
|
||||||
init_width = 2, factor = 0.5) {
|
|
||||||
|
|
||||||
ctx.save();
|
ctx.save();
|
||||||
|
|
||||||
ctx.translate(-transform[0], -transform[1]);
|
ctx.translate(-transform[0], -transform[1]);
|
||||||
|
|
||||||
|
for (let i = lines[0].length - 1; i >= 0 ; i -= 1) {
|
||||||
for (let delta of lines) {
|
ctx.lineWidth = parseInt(lines[0][i]);
|
||||||
ctx.lineWidth = init_width;
|
const delta = parseInt(lines[1][i]);
|
||||||
|
ctx.strokeStyle = "transparent";
|
||||||
|
ctx.strokeStyle = lines[2][i];
|
||||||
|
|
||||||
let xoff = transform[0] % delta;
|
let xoff = transform[0] % delta;
|
||||||
let yoff = transform[1] % delta;
|
let yoff = transform[1] % delta;
|
||||||
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
|
|
||||||
for (let i = xoff; i < size[0]; i += delta) {
|
for (let j = xoff; j < size[0]; j += delta) {
|
||||||
ctx.moveTo(i, 0);
|
ctx.moveTo(j, 0);
|
||||||
ctx.lineTo(i, size[1]);
|
ctx.lineTo(j, size[1]);
|
||||||
}
|
}
|
||||||
for (let j = yoff; j < size[1]; j += delta) {
|
for (let j = yoff; j < size[1]; j += delta) {
|
||||||
ctx.moveTo(0, j);
|
ctx.moveTo(0, j);
|
||||||
|
@ -54,8 +83,6 @@ function draw_grid(
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
init_width *= factor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
|
@ -28,10 +28,12 @@ $darkgrey: darken($grey, 20);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
a {
|
a,
|
||||||
|
input,
|
||||||
|
p {
|
||||||
padding: 8px 8px 8px 32px;
|
padding: 8px 8px 8px 32px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 25px;
|
font-size: 20px;
|
||||||
color: white;
|
color: white;
|
||||||
display: block;
|
display: block;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
|
@ -47,6 +49,52 @@ $darkgrey: darken($grey, 20);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
border: 2px solid $orange;
|
||||||
|
border-radius: 8px;
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
color: $orange;
|
||||||
|
padding: 0 5px;
|
||||||
|
position: absolute;
|
||||||
|
top: -13px;
|
||||||
|
left: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: $grey;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
border: 1px dashed $lightgrey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prop {
|
||||||
|
margin: 10px;
|
||||||
|
color: white;
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
label {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
font-size: 15px;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: $orange;
|
||||||
|
padding: 5px 10px;
|
||||||
|
width: 40%;
|
||||||
|
background-color: $lightgrey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item+.item {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.openbtn {
|
.openbtn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
|
|
Loading…
Reference in a new issue