01.ブラウザの表示領域と座標系

• top
• 数学
• 幾何学
• デバイス座標変換
• [ 01.ブラウザの表示領域と座標系 ]

作成日: 2023/01/31 更新日: 2023/03/07

初めに

1. この記事は、ブラウザの表示領域と図形を描画させる事を想定した座標系について記述します。
2. 尚、HTMLのCanvas要素についても触れます。

概要

1. 現在のディスプレイ（画面）には、液晶が主流として使われていますが、一部のハイエンド・デバイスには有機ELが使われています。
2. ディスプレイ（液晶でも有機ELでも）は、画素の集合で構成されていて、縦と横にディスプレイ（デバイス）固有の画素（数）を持っています。
   この画素のことをピクセルと呼び、ピクセルに色を表示させることで、私たちは画面に表示される情報を見ることができます。
3. そして、このデバイス固有のピクセル（画素）数のことを解像度と呼び、例えば1024x768（横x縦）という表現をします。
   この解像度が、デバイス固有の矩形の物理表示領域となります。
4. この解像度は、カメラの性能や画像（写真）の質を表すとき、同じ意味で使われます。
5. カメラの性能を表すときなどに、700万画素のように横と縦を掛け合わせた画素の総数で、解像度を表すことがありますが、この数値は、カメラの性能を人に直感的に働きかけるもので、実用性はほとんどありません。
   1024x768（横x縦）のような表記を参考にすることをお勧めします。
6. デバイス固有の矩形の物理表示領域に対して、Webページも矩形の表示領域を持ちますが、これを仮想表示領域と呼びます。
   尚、図形を描画する場合、要素（Canvas）の領域を仮想表示領域として使用します。
   
7. 物理表示領域と仮想表示領域は直交座標系で、それぞれの横（ｘ）方向と縦（ｙ）方向の目盛り（ピッチ）は同じです。
8. 尚、どのようなローカル座標系であっても、物理表示領域に表示可能ですが、少し複雑な座標変換を必要とするので、この記事では扱いません。
   

ブラウザの表示

ブラウザ

1. 私たちは、インターネットを使って、ログインする権限を持っているサイトにアクセスして、「ファイルをダウンロードする」「データベースを操作する」「Webページを閲覧する」など様々なことができます。
2. この記事では、Webページを閲覧するブラウザについて記述します。
3. Google Chrome・Microsoft Edge・Internet Explolerなど、数多くのブラウザソフトが存在しますが、そのどれもが、「Webページを閲覧する」機能を共通して持っています。
   そして、そのどれもが、他のブラウザと差別化を図るため独自の機能を持っています。
   また、そのどれもが、異なる不具合あるいは出来ないことを持っています。
   よって、同一の目的を持ったユーザグループは同一のブラウザを使用することをお勧めします。

ブラウザの表示領域-「窓」

1. 物理表示領域（デバイス）やOS、ブラウザソフト、ユーザの操作などにより決定されるブラウザ内の表示領域を「窓」と呼ぶことにします。
   上述したように、図形を描画する場合、要素（Canvas）の領域も「窓」として使用します。
   そして、ブラウザの「窓」より要素（Canvas）の「窓」が優先されます。
2. ブラウザは、閲覧するWebページの仮想表示領域の全体、あるいは一部を表示します。
3. Webコンテンツが一部しか表示されない場合、スクロール、スワイプ、ピンチイン、ピンチアウト（窓に対する仮想表示領域の移動、拡大や縮小）などのユーザ操作によって見えない部分に移動してコンテンツを表示することができます。
4. 要素（Canvas）は、ユーザ操作の移動によって予期せぬ表示をするので意図的（プログラムによって）に制御する必要があります。
   ブラウザの機能だけでは、予期した振る舞いをしない可能性があります。

座標系

1. 窓、仮想表示領域共に座標系の原点（左上）は、（０，０）です。
   そして、私たちが、中学生のころ学習した数学座標系は横（ｘ）は右方向に値を正（＋）として増えていき、縦（ｙ）は上方向に値を正（＋）として増えていきました。
2. しかし、私たちが使うディスプレイ（画面）の原点は通常左上にあるため、横（ｘ）は右方向に値を正（＋）として増えていき、縦（ｙ）は下方向に値を正（＋）として増えていきます。
3. ディスプレイ（画面）の原点が左上にあって、右向きに正（＋）、下向きに正（＋）に設定されているのは、単純に使いやすいからです。
4. 例えば、日本語の小説のように右上に原点を持ち、左向きに正（＋）、下向きに正（＋）の縦書きに設定することも可能です（但し、座標変換に工夫が必要です）。
5. 仮想表示領域を「窓」に表示する時、必要な情報は「窓」の原点に対する仮想表示領域の座標とサイズ（画素数）、方向（軸）の向きの性質です。
6. 要素（Canvas）に図形を描画する時、サイズはWebページ（仮想表示領域）によって変化します。
   「窓」のサイズはデバイスなどにより変化します。
   方向（軸）の向きの性質は共に右向きに正（＋）、下向きに正（＋）です。

座標変換

1. 現在表示されているコンテンツが「窓」の原点（左上）に対して仮想表示領域のどの座標に合致しているのかという情報と、仮想表示領域の対角の隅（右下）の座標が座標変換に必要です。
2. 上の情報があれば、縮尺は必然的に決定されます。
   尚、縦方向と横方向の縮尺が異なれば、表示内容が歪むので、同一なことが必要です。
   同一の縮尺にすると、仮想表示領域の対角の隅（右下）の座標が変更されることになります。

最後に

1. ブラウザを使えば、どのようなデバイス上でもほとんどのWebコンテンツの表示が可能です。
2. しかし、ブラウザ上で図形を描画する時、基本的な要素（Canvas）しか用意されていませんので、それを使用します。
3. 任意のローカル座標系上の図形をブラウザに表示するために、座標変換などの要素（Canvas）の制御が必要になります。

お問合せ・御要望

お問合せ