logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 05:50:39 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Restricted camera in canvas

Browse source
This commit is contained in:
Logan 2024-11-06 23:28:38 -06:00
parent 34544c8bdf
commit b9153998f1
2 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/canvas.html
View file

@ -21,7 +21,7 @@
</div> </div>
<!--note to self: below IS the canvas--> <!--note to self: below IS the canvas-->
<!--<div class="canvasCont">--> <!--<div class="canvasCont">-->
<canvas id="canvas" width="1000" height="500" style="border:1px solid #000000;" alt="canvas"></canvas> <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
<div id="toolbar" class="d-flex align-items-center toolbar"> <div id="toolbar" class="d-flex align-items-center toolbar">
<div class="toolbarItems"> <div class="toolbarItems">
<button id="zoomOut">-</button> <button id="zoomOut">-</button>
@ -39,4 +39,4 @@
</div> </div>
<script src="./canvas.js"></script> <script src="./canvas.js"></script>
</body> </body>
</html> </html>

18
static/canvas.js
View file

@ -20,6 +20,7 @@ window.addEventListener("load", async (e) => {
for (let x = 0; x < DATA_SIZE * DATA_SIZE * 4; x++) { for (let x = 0; x < DATA_SIZE * DATA_SIZE * 4; x++) {
image.data[x] = 255; image.data[x] = 255;
} }
ctx.imageSmoothingEnabled = false;
// Create drawable image, update it every half second // Create drawable image, update it every half second
await redraw(); await redraw();
setInterval(redraw, 500); setInterval(redraw, 500);
@ -41,9 +42,8 @@ function setPixel(data, x, y, color) {
function draw() { function draw() {
ctx.fillStyle = "rgb(0 0 0 255)"; ctx.fillStyle = "rgb(0 0 0 255)";
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
let drawScale = CANVAS_SIZE / DATA_SIZE * scale; let drawScale = CANVAS_SIZE / DATA_SIZE * scale;
ctx.imageSmoothingEnabled = false;
ctx.scale(drawScale, drawScale); ctx.scale(drawScale, drawScale);
ctx.drawImage(bitmap, offx, offy); ctx.drawImage(bitmap, offx, offy);
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.setTransform(1, 0, 0, 1, 0, 0);
@ -57,20 +57,24 @@ function mousePosition(e) {
return {x: cx, y: cy}; return {x: cx, y: cy};
} }
function moveOffset(x, y) {
offx = Math.min(Math.max(x, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
}
canvas.addEventListener("wheel", async (e) => { canvas.addEventListener("wheel", async (e) => {
let mouse = mousePosition(e); let mouse = mousePosition(e);
console.log(mouse);
let oldScale = scale; let oldScale = scale;
if (e.deltaY < 0) { if (e.deltaY < 0) {
scale += 0.1; scale += 0.1;
} else if (e.deltaY > 0) { } else if (e.deltaY > 0) {
scale -= 0.1; scale -= 0.1;
} }
scale = Math.min(Math.max(scale, 0.5), 10);
let diff = (CANVAS_SIZE / oldScale) - (CANVAS_SIZE / scale); let diff = (CANVAS_SIZE / oldScale) - (CANVAS_SIZE / scale);
let ratiox = (mouse.x - (CANVAS_SIZE / 2)) / CANVAS_SIZE; let ratiox = (mouse.x - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
let ratioy = (mouse.y - (CANVAS_SIZE / 2)) / CANVAS_SIZE; let ratioy = (mouse.y - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
offx += diff * ratiox; moveOffset(diff * ratiox, diff* ratioy);
offy += diff * ratioy;
draw(image); draw(image);
}); });
@ -111,6 +115,10 @@ canvas.addEventListener("mousemove", async (e) => {
if (e.buttons & 1) { if (e.buttons & 1) {
offx += e.movementX * (1.0 / scale) * 0.45; offx += e.movementX * (1.0 / scale) * 0.45;
offy += e.movementY * (1.0 / scale) * 0.45; offy += e.movementY * (1.0 / scale) * 0.45;
moveOffset(
offx + e.movementX * (1.0 / scale) * 0.45,
offy + e.movementY * (1.0 / scale) * 0.45
);
draw(image); draw(image);
} }
}); });