technologiesこの広告は、90日以上更新していないブログに表示しています。Webデザイン座標をいじるようなスクリプトを作成していると、たまに予測不可能な挙動をするときがあります。今まではあまり深く探ってきませんでしたが、良い機会なので調べてみることにしました。オブジェクトの座標を示す2種類のプロパティある程度スクリプトをいじったことがあるひとであればわかると思いますが、オブジェクトの座標を指定するときには「.position」のプロパティに代入します。他にも「.left、.top」というプロパティがありつい最近まで同じもの指すのだろうと考えていました。ところが、座標系の問題があるので色々と調べてみたら、どうやら上記の2種類は違う座標を示しているという重大な発見をしました。下図のような線の太さ10pxのオブジェクトを作ったとします。スクリプトでこのオブジェクトの.left、.top、.positionの数値を見てみてください。.positionは線幅などを含まない純粋なパスの座標(青色のパス)の左上を指すのに対し、.left、.topは線幅やドロップシャドウのようなアピアランス効果まで含んだ大きさになっています。以前調査したvisibleBoundsとgeometricBoundsとも比べてみると次のような関係があることが分かりました。left、topはvisibleBoundsと同じ座標を指し、positionはgeometricBoundsと同じ座標を指します。LeftとRightはアピアランスや線幅によって座標位置が変わるなど色々と不都合がおおいので、.positionを使って位置を指定してあげたほうが良さそうです。topの違いTweet広告を非表示にする関連記事2015-04-21illustratorでUIデザイン:切り出しスクリプトの設定変更illustratorでは画像を書き出すときにいくつかのオプションがあ...2014-10-03illustratorでUIデザイン:属性抽出スクリプト文字のサイズ・色やパスの線の太さ・塗りの色などを抽出してく...2014-09-17illustratorでUIデザイン:スクリプトの注意点illustratorのスクリプトについて調べていくうちに意外と引っか...2014-09-04illustratorでUIデザイン:ボタン量産スクリプトまたillustrator用のスクリプトを作成してみました。タイトルそ...2014-09-03illustratorでUIデザイン:便利なショートカット今回は便利なショートカット集です。»プロフィールid:two-hatsUIデザイン関連のネタや、個人的なインテリアの趣味など思いついたものを投稿するごった煮なブログです。(2)月別アーカイブはてなブログをはじめよう!two-hatsさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。