kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix analog clock alignment

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 10:52:21 +02:00
parent b7a074a75d
commit dbbb21b3d8
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
clock.js
View File

@ -41,14 +41,17 @@
} }
// Position markers based on the current clock size // Position markers based on the current clock size
const borderOffset = clock.offsetWidth > 300 ? 30 : 20; // Move markers slightly inward and tweak the center position so
// the ring of ticks lines up perfectly with the border.
const borderOffset = clock.offsetWidth > 300 ? 35 : 25;
const centerAdjust = { x: -1, y: -1 };
const markerRadius = clock.offsetWidth / 2 - borderOffset; const markerRadius = clock.offsetWidth / 2 - borderOffset;
markers.forEach((m, i) => { markers.forEach((m, i) => {
const angle = (i / 16) * 2 * Math.PI; const angle = (i / 16) * 2 * Math.PI;
const x = markerRadius * Math.sin(angle); const x = markerRadius * Math.sin(angle);
const y = -markerRadius * Math.cos(angle); const y = -markerRadius * Math.cos(angle);
m.style.left = `${clock.offsetWidth / 2 + x}px`; m.style.left = `${clock.offsetWidth / 2 + x + centerAdjust.x}px`;
m.style.top = `${clock.offsetHeight / 2 + y}px`; m.style.top = `${clock.offsetHeight / 2 + y + centerAdjust.y}px`;
}); });
// Tick lengths based on the marker radius // Tick lengths based on the marker radius
@ -66,8 +69,8 @@
const x = innerR * Math.sin(angle); const x = innerR * Math.sin(angle);
const y = -innerR * Math.cos(angle); const y = -innerR * Math.cos(angle);
t.style.height = `${len}px`; t.style.height = `${len}px`;
t.style.left = `${clock.offsetWidth / 2 + x - t.offsetWidth / 2}px`; t.style.left = `${clock.offsetWidth / 2 + x - t.offsetWidth / 2 + centerAdjust.x}px`;
t.style.top = `${clock.offsetHeight / 2 + y}px`; t.style.top = `${clock.offsetHeight / 2 + y + centerAdjust.y}px`;
t.style.transform = `rotate(${angle}rad)`; t.style.transform = `rotate(${angle}rad)`;
if (clock.offsetWidth < 200 && !t.classList.contains('big') && !t.classList.contains('mid')) { if (clock.offsetWidth < 200 && !t.classList.contains('big') && !t.classList.contains('mid')) {
t.style.display = 'none'; t.style.display = 'none';