From a6e45246ded197a85c75fcfb936f367be8573e1b Mon Sep 17 00:00:00 2001 From: saingchildren Date: Fri, 14 Nov 2025 17:25:45 +0800 Subject: [PATCH] =?UTF-8?q?scroll=E3=80=81layout=E3=80=81click=20ok?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- images/1.jpg | Bin 0 -> 6255 bytes images/2.jpg | Bin 0 -> 8106 bytes main.js | 98 ++++++++++++++++++++++++++++++++++++++++----------- 3 files changed, 77 insertions(+), 21 deletions(-) create mode 100644 images/1.jpg create mode 100644 images/2.jpg diff --git a/images/1.jpg b/images/1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..729e13beefedba8fc90f88728f66f5ede46c3865 GIT binary patch literal 6255 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 YG~EN-ub2&pQ%qHM_F+GhH$GqeAH1)c=l}o! literal 0 HcmV?d00001 diff --git a/images/2.jpg b/images/2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..fb19eaa65ed8c8f8f7c3625085ab55c7452edfe2 GIT binary patch literal 8106 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 { + scrollTop += e.deltaY; + const rows = Math.ceil(count / columns); + const contentHeight = rows * (thumbW + gap); - ctx.beginPath(); - ctx.moveTo(20, 20); - ctx.lineTo(200, 50); - ctx.strokeStyle = 'blue'; - ctx.lineWidth = 4; - ctx.stroke(); + let maxScroll = contentHeight - canvas.height; + if (maxScroll < 0) maxScroll = 0; - ctx.font = "20px Arial"; - ctx.fillStyle = "black"; - ctx.fillText("Canvas", 20, 100); + if (scrollTop < 0) scrollTop = 0; + if (scrollTop > maxScroll) scrollTop = maxScroll + 10; - requestAnimationFrame(render); + render(); +}); + +canvas.addEventListener("click", handleClick); + +img.onload = () => { + render(); +}; + +function getMousePos(e) { + const rect = canvas.getBoundingClientRect(); + return { + x: e.clientX - rect.left, + y: e.clientY - rect.top, + }; } -render(); +function handleClick(e) { + const pos = getMousePos(e); + const mouseX = pos.x; + const mouseY = pos.y; -canvas.addEventListener("click", (e) => { - const rect = canvas.getBoundingClientRect(); - const x = e.clientX - rect.left; - const y = e.clientY - rect.top; -}); + for (let i = 0; i < count; i++) { + const row = Math.floor(i / columns); + const col = i % columns; + + const x = col * (thumbW + gap); + const y = row * (thumbH + gap) - scrollTop; + + if ( + mouseX >= x && + mouseX <= x + thumbW && + mouseY >= y && + mouseY <= y + thumbH + ) { + selectedIndex = i; + render(); + return; + } + } +} + +function render() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + for (let i = 0; i < count; i++) { + const totalWidth = columns * (thumbW + gap) - gap; + const startX = (canvas.width - totalWidth) / 2; + const row = Math.floor(i / columns); + const col = i % columns; + + const x = startX + col * (thumbW + gap); + const y = row * (thumbH + gap) - scrollTop; + + ctx.drawImage(img, x, y + 10, thumbW, thumbH); + + if (i === selectedIndex) { + ctx.strokeStyle = "red"; + ctx.lineWidth = 4; + ctx.strokeRect(x, y + 10, thumbW, thumbH); + } + } +}