illustratorでUIデザイン：スクリプトの注意点
illustratorのスクリプトについて調べていくうちに意外と引っかかりそうな困った点をいくつか見つけました。
四角形・楕円形の関数の引数はXY座標の順ではない
これ最初に引っかかりました。
PathItemsにはrectangleとellipseという四角形・楕円形を描くメソッドがあるのですが、引数の順番がXYの順ではなくTOP、LEFTになっています。つまり、Y座標、X座標の順です。
TOPはマイナス値を指定することにも注意してください。
要素の位置を取得する各Boundsの違い
PathItemsなど要素の位置を取得するプロパティを複数もっているものがいくつかあります。公式リファレンスにはコントロールポイントまで含む、線の太さまで含む、線とコントロールポイントは含まないの3種類というように書かれていましたが、どうやらそれだけではないようです。
PathItemsを例に各Boundsの定義の違いについて見てみたいと思います。
- ControlBounds：コントロールポイントまで含んだ位置を取得
- VisibleBounds：線の太さを含んだ位置を取得
- GeometricBounds：線の含まない位置を取得
これらの要素にドロップシャドウなどの効果をかけてあげると取得する位置が変わります。
- ControlBounds：効果を含んだ位置を取得
- VisibleBounds：効果を含んだ位置を取得
- GeometricBounds：効果は含まない
昔ながらのボタンは画像で作るよというプログラムであればVisibleBoundsをつかって取得すればよいですが、CSSのようにプログラムでドロップシャドウがかけれるシステム用に位置取得するスクリプトを作る場合は、どのBoundsを使うか事前に検証したほうが良いと思います。
各Boundsを書き出すスクリプトを作成したのでご活用下さい。各Bounds大きさ確認.jsx
また、Boundsは実は要素の座標を[左上のX、左上のY、右下のX、右下のY]という配列として返すだけですが、その数値を元に計算して幅と高さを求めてあげる必要があります。
関連記事
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
