Embed Notice

ピンチズームの再発明をしていた
なんか変なコードができた（よく動く）// 初期化 let u1 = image_width / 2, v1 = image_height / 2, z1 = 1; // a, b を中心としたピンチズーム function pinchZoom(el, z2, a, b) { // ピンチの中心が変わらないことを利用して、拡大縮小の中心を計算 const s = (a - u1 + z1 * u1) / z1, t = (b - v1 + z1 * v1) / z1; const u2 = (z1 * s + u1 - z1 * u1 - z2 * s) / (1 - z2); const v2 = (z1 * t + v1 - z1 * v1 - z2 * t) / (1 - z2); // translate(u2, v2) scale(z2) translate(-u2, -v2) と等価だがアニメーションを滑らかにするため に行列を計算 const a = (1 - z2) * u2; const b = (1 - z2) * v2; const matrix = `matrix(${scale}, 0, 0, ${scale}, ${a}, ${b})`; el.style.transform = matrix; el.style.transformOrigin = `0 0`; u1 = u2 v1 = v2 z1 = z2 }