Slide 11
Slide 11 text
【パラパラ漫画機能を実現するために②】
取得したインデックス番号をもとに画像を描画します。
画像の描画は canvas の drawImage を使うことで実現します。
別案:
・videoタグの動画を進み具合にJSで操作する
→ 動画サイズが大きいと後半の内容の画質が悪くなる
(再生しないとフレームをちゃんと読み込まない?)
・DOMを操作する
→ サイト自体がJSですごく重くなったので、見送り。
const img = await loadImage(framePaths[index]);
const canvas = canvasRef.current;
const context = canvas.getContext('2d');
// 中央寄せするための計算 (object-fix: cover; をJSで再現)
const { offset, size } = calcCoverRect(
{ width: canvas.clientWidth, height: canvas.clientHeight },
{ width: img.width, height: img.height }
);
// 画質を落とさないための拡大率の計算
const scale = calcCanvasScale(canvas);
requestAnimationFrame(() => {
context.drawImage(
img,
offset.left * scale.x,
offset.top * scale.y,
size.width * scale.x,
size.height * scale.y
);
});