sandvich
/
hackathon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[auto] move 3D coordinate labels to fixed top-left position with larger font 

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
main
name 2026-04-11 11:48:39 -07:00
parent 3aeb39e180
commit aeaa4c246b
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.tsx
View File

@ -176,11 +176,10 @@ function App() {
)
}
// Draw 3D coordinates for ankles and toes
const lm2d = result.landmarks[0]
// Draw 3D coordinates for ankles and toes (fixed position, top-left)
const wl = result.worldLandmarks[0]
if (lm2d && wl && lm2d.length >= 33 && wl.length >= 33) {
ctx.font = 'bold 18px monospace'
if (wl && wl.length >= 33) {
ctx.font = 'bold 28px monospace'
ctx.textBaseline = 'top'
const labels: [number, string, string][] = [
[27, 'L ankle', '#00ffcc'],
@ -188,15 +187,15 @@ function App() {
[31, 'L toe', '#ffcc00'],
[32, 'R toe', '#ffcc00'],
]
let y = 10
for (const [idx, name, color] of labels) {
const sx = lm2d[idx].x * canvas.width
const sy = lm2d[idx].y * canvas.height
const w = wl[idx]
const text = `${name} (${w.x.toFixed(3)}, ${w.y.toFixed(3)}, ${w.z.toFixed(3)})`
ctx.fillStyle = 'rgba(0,0,0,0.6)'
ctx.fillRect(sx + 8, sy - 2, ctx.measureText(text).width + 8, 22)
const text = `${name} x${w.x.toFixed(3)} y${w.y.toFixed(3)} z${w.z.toFixed(3)}`
ctx.fillStyle = 'rgba(0,0,0,0.7)'
ctx.fillRect(8, y - 2, ctx.measureText(text).width + 16, 34)
ctx.fillStyle = color
ctx.fillText(text, sx + 12, sy)
ctx.fillText(text, 16, y)
y += 38
}
}