90 lines
2.0 KiB
JavaScript
90 lines
2.0 KiB
JavaScript
const canvas = document.getElementById("c");
|
|
const c = canvas.getContext("2d");
|
|
|
|
const imageWidth = 100;
|
|
const imageHeight = 100;
|
|
const columns = Math.floor(canvas.width / imageWidth);
|
|
const totalImageCount = 100;
|
|
|
|
let scrollTop = 0;
|
|
let selectedIndex = -1;
|
|
|
|
function getMousePos(e) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
return {
|
|
x: e.clientX - rect.left,
|
|
y: e.clientY - rect.top,
|
|
};
|
|
}
|
|
|
|
function unselectImage() {
|
|
selectedIndex = -1;
|
|
canvas.removeEventListener("click", unselectImage);
|
|
canvas.addEventListener("click", handleClick);
|
|
render();
|
|
}
|
|
|
|
function handleClick(e) {
|
|
const { x: mouseX, y: mouseY } = getMousePos(e);
|
|
|
|
for (let i = 0; i < totalImageCount; i++) {
|
|
const row = Math.floor(i / columns);
|
|
const col = i % columns;
|
|
|
|
const x = col * imageWidth;
|
|
const y = row * imageHeight - scrollTop;
|
|
|
|
if (
|
|
mouseX >= x &&
|
|
mouseX <= x + imageWidth &&
|
|
mouseY >= y &&
|
|
mouseY <= y + imageHeight
|
|
) {
|
|
selectedIndex = i;
|
|
canvas.removeEventListener("click", handleClick);
|
|
canvas.addEventListener("click", unselectImage);
|
|
render();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
canvas.addEventListener("click", handleClick);
|
|
|
|
canvas.addEventListener("wheel", (e) => {
|
|
scrollTop += e.deltaY;
|
|
|
|
const rows = Math.ceil(totalImageCount / columns);
|
|
const contentHeight = rows * imageHeight;
|
|
|
|
const maxScroll = Math.max(0, contentHeight - canvas.height);
|
|
|
|
scrollTop = Math.min(Math.max(scrollTop, 0), maxScroll);
|
|
|
|
render();
|
|
});
|
|
|
|
const img = new Image();
|
|
img.src = "./images/1.jpg";
|
|
img.onload = () => render();
|
|
|
|
function render() {
|
|
c.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
if (selectedIndex >= 0) {
|
|
c.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
return;
|
|
}
|
|
|
|
for (let i = 0; i < totalImageCount; i++) {
|
|
const row = Math.floor(i / columns);
|
|
const col = i % columns;
|
|
|
|
const x = col * imageWidth;
|
|
const y = row * imageHeight - scrollTop;
|
|
|
|
c.drawImage(img, x, y, imageWidth, imageHeight);
|
|
}
|
|
}
|
|
|