作成日: 2023/01/30 更新日: 2023/03/04
初めに
- この記事は、ユークリッド空間、デカルトの直交平面座標系を前提とします。
- この記事は、任意のローカル座標系の図形をブラウザ上の要素(Canvas)に描画することを目的とします。
- よって、数学的に厳密な定義などは行いませんし、行列など複雑な計算も使用しません。
CANVASに図形を描画するための座標変換
座標系
- Canvasと任意のローカル座標系の座標を01.ブラウザの表示領域と座標系に基づいて変換します。
次の2つが、必要です。- Canvasのサイズ
- 任意のローカル座標系のサイズ
座標変換に使用する開発プラットフォーム
- パソコン:Webアプリの作成
- スマホ・タブレットのアプリ(当面、Androidだけ):Visual Studioをプラットフォーム(IDE)とし、C#言語を使用します。
座標変換のための前処理
任意のローカル座標系のX、Y座標の正規化
- 値の正規化にはいくつかの方法がありますが、ここではその1つを使用します。
- 任意のローカル座標系のX座標群を集合Xとします。
- 集合XからX座標の平均値を求めます。
そして、平均値をAveXとします。 - 集合Xの全ての要素からAveXを減じて集合X2を作ります。
- 集合X2から最小値と最大値を求めます。
そして、最小値と最大値の絶対値の大きい値AbsMaxXを求めます。 - 集合X2の全ての要素をAbsMaxXで除して集合X3を作ります。
- 上記の方法で、集合X3の全ての要素の値は、-1.0~+1.0に収まります。
- Y座標群も同じ処理をして、集合Y3を作ります。
- 尚、座標としてのXYのペア情報は保持するものとします。
動的にCANVASに描画する準備
- 表示するデバイスの情報(サイズなど)を取得します。(DOM)
- WindowsのWindowの場合ScrKind=0、スマホの場合ScrKind=1、タブレットの場合ScrKind=2とします。
(ScrKind=1と2は同じになるだろうと予測しています。) - WindowsのWindowのサイズ変更イベントとスマホ、タブレットの表示向き変更イベントをHookできるようして、動的に表示を切り替えられるようにします。
Hook(関数)とは、イベントが発生した時に処理するソースコードを記述する関数のことです。
(Hookは「引っ掛ける」という意味で、発生したイベントを引っ掛けて、その時に処理をする関数を記述しましょうということです。)
正規化した任意のローカル座標系の値を実座標に戻す方法
- 正規化したX座標だけを考えます。
- 正規化したX座標にAbsMaxXを乗じます。
- そして、AveXを加えるとローカル座標系の実X座標になります。
任意の座標系⇒ブラウザ領域の座標変換
変換パラメーター
- 平行移動:座標系の原点移動量(x軸,y軸)
- 縮尺:x軸,y軸