それなりブログ

とあるWebエンジニアのそれなりのブログ、JavaScript/Node.js/Python/PHP/ゲーム作成 など

(20, 20) の場所に要素を置いたとき、(20, 20) の点は描画されていない

極々当然の話なんですけど、意識して考えたのは初めてだったという類の話です。
HTMLとかFlashとかで
「絶対座標で top=20, left=20 の場所に 10×10 の要素を置く」としたときに、
要素が描画される場所は top座標にして21~30、letf座標にして21~30 の100ピクセルの範囲なんですね。

図にするとこんな風になる

☆=(20, 20)
■=要素が描画される場所
☆□□□□□□□□□□□
□■■■■■■■■■■□
□■■■■■■■■■■□
□■■■■■■■■■■□
□■■■■■■■■■■□
□■■■■■■■■■■□
□■■■■■■■■■■□
□■■■■■■■■■■□
□■■■■■■■■■■□
□■■■■■■■■■■□
□■■■■■■■■■■□
□□□□□□□□□□□□

つまり、(top, left) の座標に要素を描画するとしたときは
実際に描画されているのは (top + 1, left + 1) の点からなんですねー

・・・と、これだけで、今まで考えたことも無かったんですが、
この件がAS3のGraphics#moveToとGraphics#lineToのバヤイに微妙に引っ掛かった。

例えば、こういうとき

graphics.moveTo(1, 1);
graphics.lineTo(11, 1);
☆=(1, 1)
■=線が描画される場所
☆□□□□□□□□□□□
□■■■■■■■■■■□
□□□□□□□□□□□□

「top座標が1の行をleft方向に10ピクセル描画する」のかと思いきや
「top座標が2の行をleft方向に10ピクセル描画する」んですよね。

・・・うーん、なるほどなぁ。



コメントを残す

メールアドレスが公開されることはありません。

Categories

Archives