02.任意のローカル座標系の図形をブラウザに描画


作成日: 2023/01/30 更新日: 2023/03/04

初めに

  1. この記事は、ユークリッド空間、デカルトの直交平面座標系を前提とします。
  2. この記事は、任意のローカル座標系の図形をブラウザ上の要素(Canvas)に描画することを目的とします。
  3. よって、数学的に厳密な定義などは行いませんし、行列など複雑な計算も使用しません。

CANVASに図形を描画するための座標変換

座標系

  1. Canvasと任意のローカル座標系の座標を01.ブラウザの表示領域と座標系に基づいて変換します。
    次の2つが、必要です。
    1. Canvasのサイズ
    2. 任意のローカル座標系のサイズ

座標変換に使用する開発プラットフォーム

  1. パソコン:Webアプリの作成
  2. スマホ・タブレットのアプリ(当面、Androidだけ):Visual Studioをプラットフォーム(IDE)とし、C#言語を使用します。

座標変換のための前処理

任意のローカル座標系のX、Y座標の正規化

  1. 値の正規化にはいくつかの方法がありますが、ここではその1つを使用します。
    1. 任意のローカル座標系のX座標群を集合Xとします。
    2. 集合XからX座標の平均値を求めます。
      そして、平均値をAveXとします。
    3. 集合Xの全ての要素からAveXを減じて集合X2を作ります。
    4. 集合X2から最小値と最大値を求めます。
      そして、最小値と最大値の絶対値の大きい値AbsMaxXを求めます。
    5. 集合X2の全ての要素をAbsMaxXで除して集合X3を作ります。
    6. 上記の方法で、集合X3の全ての要素の値は、-1.0~+1.0に収まります。
    7. Y座標群も同じ処理をして、集合Y3を作ります。
    8. 尚、座標としてのXYのペア情報は保持するものとします。

動的にCANVASに描画する準備

  1. 表示するデバイスの情報(サイズなど)を取得します。(DOM)
  2. WindowsのWindowの場合ScrKind=0、スマホの場合ScrKind=1、タブレットの場合ScrKind=2とします。
    (ScrKind=1と2は同じになるだろうと予測しています。)
  3. WindowsのWindowのサイズ変更イベントとスマホ、タブレットの表示向き変更イベントをHookできるようして、動的に表示を切り替えられるようにします。
    Hook(関数)とは、イベントが発生した時に処理するソースコードを記述する関数のことです。
    (Hookは「引っ掛ける」という意味で、発生したイベントを引っ掛けて、その時に処理をする関数を記述しましょうということです。)

正規化した任意のローカル座標系の値を実座標に戻す方法

  1. 正規化したX座標だけを考えます。
  2. 正規化したX座標にAbsMaxXを乗じます。
  3. そして、AveXを加えるとローカル座標系の実X座標になります。

任意の座標系⇒ブラウザ領域の座標変換

変換パラメーター

  1. 平行移動:座標系の原点移動量(x軸,y軸)
  2. 縮尺:x軸,y軸

お問合せ・御要望

お問合せ
Verified by MonsterInsights
タイトルとURLをコピーしました