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
const radius = clock.offsetWidth / 2 - 20;
const markerRadius = clock.offsetWidth / 2 - 20;
markers.forEach((m, i) => {
const angle = (i / 16) * 2 * Math.PI;
const x = radius * Math.sin(angle);
const y = -radius * Math.cos(angle);
const x = markerRadius * Math.sin(angle);
const y = -markerRadius * Math.cos(angle);
m.style.left = `${clock.offsetWidth / 2 + x}px`;
m.style.top = `${clock.offsetHeight / 2 + y}px`;
});
// Tick lengths based on radius
const lenBig = radius * 0.12;
const lenMid = radius * 0.08;
const lenSmall = radius * 0.05;
// Tick lengths based on the marker radius
const lenBig = markerRadius * 0.12;
const lenMid = markerRadius * 0.08;
const lenSmall = markerRadius * 0.05;
ticks.forEach((t, i) => {
let len = lenSmall;
if (t.classList.contains('big')) len = lenBig;
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 x = innerR * Math.sin(angle);
const y = -innerR * Math.cos(angle);