作成日: 2023/01/30 更新日: 2023/03/04
初めに
- この記事は、ユークリッド空間、デカルトの直交平面座標系を前提とします。
- この記事は、任意のローカル座標系の図形をブラウザ上の要素（Canvas）に描画することを目的とします。
- よって、数学的に厳密な定義などは行いませんし、行列など複雑な計算も使用しません。
CANVASに図形を描画するための座標変換
座標系
- Canvasと任意のローカル座標系の座標を01.ブラウザの表示領域と座標系に基づいて変換します。
次の２つが、必要です。- Canvasのサイズ
- 任意のローカル座標系のサイズ
座標変換に使用する開発プラットフォーム
- パソコン：Webアプリの作成
- スマホ・タブレットのアプリ（当面、Androidだけ）：Visual Studioをプラットフォーム（IDE）とし、C#言語を使用します。
座標変換のための前処理
任意のローカル座標系のX、Ｙ座標の正規化
- 値の正規化にはいくつかの方法がありますが、ここではその１つを使用します。
- 任意のローカル座標系の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＝０、スマホの場合ScrKind＝1、タブレットの場合ScrKind＝2とします。
（ScrKind＝1と2は同じになるだろうと予測しています。） - WindowsのWindowのサイズ変更イベントとスマホ、タブレットの表示向き変更イベントをHookできるようして、動的に表示を切り替えられるようにします。
Hook（関数）とは、イベントが発生した時に処理するソースコードを記述する関数のことです。
（Hookは「引っ掛ける」という意味で、発生したイベントを引っ掛けて、その時に処理をする関数を記述しましょうということです。）
正規化した任意のローカル座標系の値を実座標に戻す方法
- 正規化したX座標だけを考えます。
- 正規化したX座標にAbsMaxXを乗じます。
- そして、AveXを加えるとローカル座標系の実X座標になります。
任意の座標系⇒ブラウザ領域の座標変換
変換パラメーター
- 平行移動：座標系の原点移動量（x軸,y軸）
- 縮尺：x軸,y軸
