キャンバスとその内容の動的リサイズ

Question

私はJavascriptの初心者ですので、私に同行してください。

基本的に私はJavascriptを使用してウェブサイト用のサンドボックス描画機能を作成しています。これはキャンバスを使って行われます。私がする必要があるのは、キャンバスのサイズを動的に変更できるようにすることですが、同時にキャンバス上のすべてのものを拡大縮小することができます。

私はこの質問が以前に聞かれたとは思わない。それは自明のようですが、私は現在キャンバス上のすべてのオブジェクトを絶対座標で定義しています。私は物事を描くのに使うマウスイベントも持っています。キャンバスを拡大したいとき（サイズを倍にすることで）内部のオブジェクトはすべて拡大縮小されず、マウス座標系も乱されます。

私が考えることができる解決策は、すべての私の描画部品にスケールファクタを追加することですが、これは多くのコードで非常に扱いにくいものです。より良い方法がありますか？

Answer 1

ダブルサイズのキャンバスの図面でジグザグが気にならない場合は、単にCSSを使用してキャンバスのサイズを変更できます。

• ダブルサイズのキャンバス要素：canvas.width*=2とcanvas.height*=2これは、自動的にすべて消去されます次に、あなたは、あなたのダブルサイズのキャンバスにジャギーをしたくない場合は2

  によって座標すべての着信のMouseEventを分割キャンバスのコンテンツ。

• キャンバスをスケールアップします。context.scale(2,2)
• 変更されていない元の座標を使用してすべての描画部品を再描画します。 ハッピーノート：あなたの描画座標をスケールする必要はありません - context.scaleはそれを自動的に行います。
• すべてのマウスイベントの座標を2で割ります。