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

Position ticks at outer clock edge

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 10:27:22 +02:00
parent bde1f36642
commit 8ac0d4943d
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
clock.js
View File

@ -41,25 +41,26 @@
} }
// Position markers based on the current clock size // Position markers based on the current clock size
const radius = clock.offsetWidth / 2 - 20; const markerRadius = clock.offsetWidth / 2 - 20;
markers.forEach((m, i) => { markers.forEach((m, i) => {
const angle = (i / 16) * 2 * Math.PI; const angle = (i / 16) * 2 * Math.PI;
const x = radius * Math.sin(angle); const x = markerRadius * Math.sin(angle);
const y = -radius * Math.cos(angle); const y = -markerRadius * Math.cos(angle);
m.style.left = `${clock.offsetWidth / 2 + x}px`; m.style.left = `${clock.offsetWidth / 2 + x}px`;
m.style.top = `${clock.offsetHeight / 2 + y}px`; m.style.top = `${clock.offsetHeight / 2 + y}px`;
}); });
// Tick lengths based on radius // Tick lengths based on the marker radius
const lenBig = radius * 0.12; const lenBig = markerRadius * 0.12;
const lenMid = radius * 0.08; const lenMid = markerRadius * 0.08;
const lenSmall = radius * 0.05; const lenSmall = markerRadius * 0.05;
ticks.forEach((t, i) => { ticks.forEach((t, i) => {
let len = lenSmall; let len = lenSmall;
if (t.classList.contains('big')) len = lenBig; if (t.classList.contains('big')) len = lenBig;
else if (t.classList.contains('mid')) len = lenMid; else if (t.classList.contains('mid')) len = lenMid;
const innerR = radius - len; const outerR = clock.offsetWidth / 2 - 2;
const innerR = outerR - len;
const angle = (i / 256) * 2 * Math.PI; const angle = (i / 256) * 2 * Math.PI;
const x = innerR * Math.sin(angle); const x = innerR * Math.sin(angle);
const y = -innerR * Math.cos(angle); const y = -innerR * Math.cos(angle);