technologiesこの広告は、90日以上更新していないブログに表示しています。Webデザインスクリプトを作成しているとの座標の計算が上手くいかなかったりすることが多く困ってしまうことがままあります。良い機会なので座標系について調べてみました。ドキュメント基準/アートボード基準の座標システムの違いスクリプト上で設定できる座標系にはドキュメント基準/アートボード基準の座標系のどちらかを設定できます。下図のような3つのアートボードを作成し実験してみます。DOCUMENTCOORDINATESYSTEM座標システムをドキュメント基準にするもので、スクリプト上ではデフォルトはこの設定になっています。試しにオブジェクトの座標取得と原点近くに楕円を書くプログラムを実行してみます。3つ目のアートボードにあるオブジェクトを選択してから実行してください。結果は次のようになりました。楕円は1つ目のアートボードの左上付近に作成され、オブジェクトの座標は数値から推測すると同じく1つ目のアートボードの原点から測った距離のようです。※オブジェクトの座標は「左上のX、左上のY(マイナス)、右下のX、右下のY(マイナス)」の順で表されます。ARTBOARDCOORDINATESYSTEM先ほどのCoordinateSystemを次のように書き換えて下さい。CoordinateSystem.ARTBOARDCOORDINATESYSTEM;...実行すると結果はこちらのようになりました。楕円もオブジェクトの座標も3つ目のアートボードの左上を原点にしているようです。ARTBOARDCOORDINATESYSTEMはアクティブなアートボードの左上を原点とみなすように変更する設定です。扱いやすいように原点の位置を自動的に調整してくれていると言えます。UIデザインなどで各画面の座標を扱いたいなどというときは「ARTBOARDCOORDINATESYSTEM」にしておくと必ず画面左上が原点になるため計算が楽になります。複数のアートボードをスクリプトで扱う場合は、原点がドキュメント内でただ1点である方が都合がいいので「DOCUMENTCOORDINATESYSTEM」のままにしておくとよいと思います。ドキュメント生成時の座標系スクリプトで新規ドキュメントを作ろうとすると座標でつまずいてしまうことがあります。新規ドキュメントを作成し、ドキュメントサイズと同じ大きさの楕円を描くとします。下記のプログラムを実行してみてください。100);同じ幅・高さのドキュメントと楕円、さらに楕円の左上は原点(0,0)なので下図のようになると想像してしまいます。実際に実行してみるとドキュメントと楕円がズレて生成されます。これはillustratorの座標の仕様が~CS4とCS5~で変わってしまったためだと推測します。CS4まではドキュメントの左下が原点で、CS5からはドキュメントの左上が原点に変更されています。調べてみるとヘルプページに解説がありました。象限に変更されました。軸の値は大きくなります。保存する場合、グローバル定規は以前のドキュメントで設定されていた位置から変わりません。座標系と定規の原点の変更は、スクリプトには適用されず、古いスクリプトを維持できるようにしています。ユーザーインターフェイスから設定した値と異なります。ポイントの変形を適用する必要があります。https://helpx.adobe.com/jp/illustrator/using/rulers-grids-guides-crop-marks.html座標系をまるっきり変えてしまうとCS4までのスクリプトが動かなくなるために今までの原点の位置は変えず、Y軸はマイナス側をあたかもプラスであるかのように扱うようにするということですね。このようにすれば原点は変わらずY軸の符号を反転させてあげるだけで一般的なプログラムの座標系と一致することになります。新規ドキュメント生成時のアートボードは第1象限にでき、楕円は第4象限にできています。ドキュメント生成するdocuments.add()は古い座標系で、図形を生成するメソッドは新しい座標系で計算されているため位置ずれが起きたのだと思います。これを解決するために、先ほど話題に上げた座標システムをアートボード基準に変更します。CoordinateSystem.ARTBOARDCOORDINATESYSTEM;」を挿入してあげます。100);すると、新規ドキュメントのアートボードの左上が原点になるように変更されるで、アートボードと楕円が同じ位置に同じサイズで描かれるようになります。topの違い座標をいじるようなスクリプトを作成していると、たまに予測不...2014-10-03illustratorでUIデザイン:属性抽出スクリプト文字のサイズ・色やパスの線の太さ・塗りの色などを抽出してく...2014-09-11illustratorでUIデザイン:スクリプトことはじめAdobeの製品は自分で書いたプログラムを動かすことができ、バッ...2014-09-03illustratorでUIデザイン:便利なショートカット今回は便利なショートカット集です。»プロフィールid:two-hatsUIデザイン関連のネタや、個人的なインテリアの趣味など思いついたものを投稿するごった煮なブログです。(2)月別アーカイブはてなブログをはじめよう!two-hatsさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。