illustratorでUIデザイン：positionとleft, topの違い
座標をいじるようなスクリプトを作成していると、たまに予測不可能な挙動をするときがあります。今まではあまり深く探ってきませんでしたが、良い機会なので調べてみることにしました。
オブジェクトの座標を示す２種類のプロパティ
ある程度スクリプトをいじったことがあるひとであればわかると思いますが、オブジェクトの座標を指定するときには「.position」のプロパティに代入します。ただ、他にも「.left、.top」というプロパティがありつい最近まで同じもの指すのだろうと考えていました。
ところが、座標系の問題があるので色々と調べてみたら、どうやら上記の２種類は違う座標を示しているという重大な発見をしました。
例えば下図のような線の太さ10pxのオブジェクトを作ったとします。
スクリプトでこのオブジェクトの.left、.top、.positionの数値を見てみてください。
.positionは線幅などを含まない純粋なパスの座標（青色のパス）の左上を指すのに対し、.left、.topは線幅やドロップシャドウのようなアピアランス効果まで含んだ大きさになっています。
以前調査したvisibleBoundsとgeometricBoundsとも比べてみると次のような関係があることが分かりました。
left、topはvisibleBoundsと同じ座標を指し、positionはgeometricBoundsと同じ座標を指します。LeftとRightはアピアランスや線幅によって座標位置が変わるなど色々と不都合がおおいので、.positionを使って位置を指定してあげたほうが良さそうです。
関連記事
UIデザイン作るためのイラレの使い方編
illustratorでUIデザイン：設定編 - Two hats
illustratorでUIデザイン：基本編 - Two hats
llustratorでUIデザイン：応用編 - Two hats
illustratorでUIデザイン：便利なショートカット - Two hats
UIデザイン用の自作スクリプト編
llustratorでUIデザイン：縦横サイズ書出しスクリプト - Two hats
llustratorでUIデザイン：相対座標書出しスクリプト - Two hats
illustratorでUIデザイン：属性抽出スクリプト - Two hats
illustratorでUIデザイン：ボタン量産スクリプト - Two hats
illustratorでUIデザイン：画面遷移図作成スクリプト - Two hats
illustratorでUIデザイン：画像切り出しスクリプト - Two hats
illustratorでUIデザイン：切り出しスクリプトの設定変更 - Two hats
スクリプト作成入門編
illustratorでUIデザイン：スクリプトことはじめ - Two hats
illustratorでUIデザイン：スクリプトの注意点 - Two hats
illustratorでUIデザイン：スクリプトでの座標系 - Two hats
illustratorでUIデザイン：positionとleft, topの違い - Two hats
