diff --git a/content/blog/2026-08-08-hyperbezier/hyperbez.js b/content/blog/2026-08-08-hyperbezier/hyperbez.js index 0b0ef11..8f3d5a7 100644 --- a/content/blog/2026-08-08-hyperbezier/hyperbez.js +++ b/content/blog/2026-08-08-hyperbezier/hyperbez.js @@ -305,7 +305,7 @@ const cv = document.getElementById('cv'), ctx = cv.getContext('2d'); const CW = 730, CH = 500; (function hidpi() { const dpr = window.devicePixelRatio || 1; - cv.style.width = CW + 'px'; cv.style.height = CH + 'px'; + cv.style.width = CW + 'px'; cv.width = Math.round(CW*dpr); cv.height = Math.round(CH*dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); })(); @@ -406,8 +406,12 @@ function render() { status.textContent = txt; } } -cv.addEventListener('pointerdown', e => { +function eventPoint(e) { const r = cv.getBoundingClientRect(), x = e.clientX - r.left, y = e.clientY - r.top; + return [x*CW/r.width, y*CH/r.height]; +} +cv.addEventListener('pointerdown', e => { + const [x, y] = eventPoint(e); let best = -1, bd = 200; P.forEach((p, i) => { const d = (p[0]-x)**2 + (p[1]-y)**2; if (d < bd) { bd = d; best = i; } }); dragging = best; @@ -415,8 +419,7 @@ cv.addEventListener('pointerdown', e => { }); cv.addEventListener('pointermove', e => { if (dragging < 0) return; - const r = cv.getBoundingClientRect(); - const nx = e.clientX - r.left, ny = e.clientY - r.top; + const [nx, ny] = eventPoint(e); if (dragging === 0 || dragging === 3) { const h = dragging === 0 ? 1 : 2; P[h][0] += nx - P[dragging][0]; P[h][1] += ny - P[dragging][1]; diff --git a/content/blog/2026-08-08-hyperbezier/index.md b/content/blog/2026-08-08-hyperbezier/index.md index f9f98f8..622ef82 100644 --- a/content/blog/2026-08-08-hyperbezier/index.md +++ b/content/blog/2026-08-08-hyperbezier/index.md @@ -35,7 +35,10 @@ The Bézier is shown in gray for comparison. canvas { background: #fff; border: 1px solid #ccc; + box-sizing: border-box; cursor: crosshair; + height: auto; + max-width: 100%; touch-action: none; } #panel { width: 310px; font-size: 13px; }