20 年前に書いた TclTK プログラムを HTML5 に移植しようとしています。
何時間ものフラストレーションの末、HTML5 のキャンバス要素を「スケーリング」または「変換」すると、それが将来の描画にのみ適用され、すでにキャンバスにあるアイテムには適用されないことがわかりました。
これは TclTK の反対であり、既にキャンバスにあるアイテムは代わりに拡大/縮小されます。
描画/再描画ループ (スケーリング/変換したいときにキャンバスをクリアしてすべてのオブジェクトを自分で再描画する) を作成する以外に、HTML5 のキャンバス要素を TclTK のように動作させる方法はありますか?
それとも、何か大きなものを見逃していますか？
Canvas 2D コンテキストは、ピクセル単位の画像操作に基づいています。これは、おなじみの「保持モード」グラフィックス インターフェイスではありません。文字通り、再描画するグラフィックの記録はありません。グラフィックを変更したい場合は、何らかの方法で再描画する必要があります。
結局、すべてが再描画されます (ただし、再描画はコードから隠されている可能性があります) が、実行しなければならない作業の量を減らす方法があります。以下にいくつかのオプションを示します。おおまかにコードに加えなければならない変更の量の順 (およびおおよそ品質/パフォーマンスの向上順):
グラフィックスをキャンバスに描画し、CSS プロパティを使用してキャンバス自体をスケーリングおよび変換します (キャンバスの幅と高さの属性ではなく、キャンバスをクリアします)。現在の縮尺に合わせて最適化された画像を新たに描画していないため、これにより画像の縮尺が変更され、品質が低下する可能性があります。
キャンバスにグラフィックを描画し、それらを または データ URL にエクスポートし、ImageData必要に応じてキャンバスに再描画します。繰り返しますが、品質が低下する可能性があります。
上記の 2 つは基本的に、既に記述したキャンバス コードを使い続けるためのコツです。TK を説明するような適切なシステムを取得するには、次のことを行います。
独自のシーン グラフを作成する: グラフィックを表す 、 などのオブジェクトのセットとCircle、Lineスケールや位置などの変換属性を格納するコンテナを作成します。次に、再描画が必要なときはいつでも、このグラフをたどって適切な描画コマンドを実行するルーチンを作成します。
代わりにSVGを使用してください。SVG はベクター グラフィックス用の言語で、最新のブラウザーでは HTML に直接埋め込むことができ、ページの残りの部分と同じように JavaScript で操作できます。SVG では、スケール属性を変更するだけで、期待どおりの変化を得ることができます。
(前のオプションは、基本的に少量の SVG を再発明することです。)