読者です 読者をやめる 読者になる 読者になる

Two hats

Design + technologies

illustratorでUIデザイン:スクリプトの注意点

ExtendScript illustrator JavaScript UIデザイン Webデザイン

illustratorスクリプトについて調べていくうちに意外と引っかかりそうな困った点をいくつか見つけました。


四角形・楕円形の関数の引数はXY座標の順ではない

これ最初に引っかかりました。
PathItemsにはrectangleとellipseという四角形・楕円形を描くメソッドがあるのですが、引数の順番がXYの順ではなくTOP、LEFTになっています。つまり、Y座標、X座標の順です。

TOPはマイナス値を指定することにも注意してください。

f:id:two-hats:20140917043349g:plain

f:id:two-hats:20140917043403g:plain



要素の位置を取得する各Boundsの違い

PathItemsなど要素の位置を取得するプロパティを複数もっているものがいくつかあります。公式リファレンスにはコントロールポイントまで含む、線の太さまで含む、線とコントロールポイントは含まないの3種類というように書かれていましたが、どうやらそれだけではないようです。

PathItemsを例に各Boundsの定義の違いについて見てみたいと思います。

f:id:two-hats:20140917044002g:plain

  • ControlBounds:コントロールポイントまで含んだ位置を取得
  • VisibleBounds:線の太さを含んだ位置を取得
  • GeometricBounds:線の含まない位置を取得


これらの要素にドロップシャドウなどの効果をかけてあげると取得する位置が変わります。

f:id:two-hats:20140917044835g:plain

  • ControlBounds:効果を含んだ位置を取得
  • VisibleBounds:効果を含んだ位置を取得
  • GeometricBounds:効果は含まない


昔ながらのボタンは画像で作るよというプログラムであればVisibleBoundsをつかって取得すればよいですが、CSSのようにプログラムでドロップシャドウがかけれるシステム用に位置取得するスクリプトを作る場合は、どのBoundsを使うか事前に検証したほうが良いと思います。


各Boundsを書き出すスクリプトを作成したのでご活用下さい。各Bounds大きさ確認.jsx


また、Boundsは実は要素の座標を[左上のX、左上のY、右下のX、右下のY]という配列として返すだけですが、その数値を元に計算して幅と高さを求めてあげる必要があります。