mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Finished implementing pixel grid

Browse Source 
Added possibility to hide / show the grid.
This commit is contained in:
unsettledgames 2020-09-26 12:40:03 +02:00
parent 933b2919b4
commit 87a25c0137
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js/_pixelGrid.js
View File

@ -1,7 +1,22 @@
let pixelGridColor = "#0000FF";
let lineDistance = 12;
let pixelGridVisible = false;
pixelGridCanvas = document.getElementById("pixel-grid");
function togglePixelGrid(event) {
let button = document.getElementById("toggle-pixelgrid-button");
pixelGridVisible = !pixelGridVisible;
if (pixelGridVisible) {
button.innerHTML = "Hide pixel grid";
pixelGridCanvas.style.display = "inline-block";
}
else {
button.innerHTML = "Show pixel grid";
pixelGridCanvas.style.display = "none";
}
}
function fillPixelGrid() {
let context = pixelGridCanvas.getContext("2d");
@ -30,4 +45,8 @@ function fillPixelGrid() {
context.stroke();
context.closePath();
}
if (!pixelGridVisible) {
pixelGridCanvas.style.display = 'none';
}
}

6
views/pixel-editor.hbs
View File

@ -58,6 +58,12 @@
<li><button id="redo-button" class="disabled">Redo</button></li>
</ul>
</li>
<li>
<button>View</button>
<ul>
<li><button id="toggle-pixelgrid-button" onclick="togglePixelGrid()">Show pixel grid</button></li>
</ul>
</li>
<li>
<button id = "layer-button">Layer</button>
<ul>