HTML5 JavaScript キャンバスのズームインとズームアウトを設定する方法についてアドバイスが必要です。実際にズームを有効にする方法についてアドバイスが必要な関数と switch ステートメントをセットアップしました。
Chromeでのみ動作する必要があるため、ブラウザのズーム機能を使用することを検討していました。これはお勧めですか?
ありがとう
HTML5 JavaScript キャンバスのズームインとズームアウトを設定する方法についてアドバイスが必要です。実際にズームを有効にする方法についてアドバイスが必要な関数と switch ステートメントをセットアップしました。
Chromeでのみ動作する必要があるため、ブラウザのズーム機能を使用することを検討していました。これはお勧めですか?
ありがとう
使うだけctx.scale(x, y)
ここに MDNの直接リンクがありますが、記事全体を読むことをお勧めします。
ブラウザーのズームを使用してキャンバスを拡大縮小できますが、キャンバスはラスター イメージであるため、拡大するとエイリアシング (ジャギー) が発生することに注意してください。エイリアシングなしでズームインされたキャンバス (つまり、キャンバスのピクセルがディスプレイのピクセルよりも大きい) に描画する方法はまだ見たことがありません。また、どのくらいズームインしているかを把握することさえ非常に難しいことが判明しました:最新のすべてのブラウザーでページのズームレベルを検出する方法は?
ただし、ブラウザーにズームを許可するのではなく、@rezoner が指摘するようctx.scale(x, y)
に使用しても、何らかのイベントで再描画してズームした場合でも、エイリアシングなしで描画できます。スムーズなズームのために、使用者がすばやくズームしている間はクイックズームとして使用し、1.3 倍程度ごとにフル再描画を実行し、ズームを停止するときにもう一度実行することをお勧めします。これにより、大まかなズームがすぐに得られる(応答性が良い)Googleマップの動作のようなものが得られますが、ズームを続けるとビューが更新されます.scale