Gunosy Tech Blog

Gunosyの開発メンバーが知見を共有するブログです。

Adobe Illustrator Scripting 1: IllustratorのパスをiOSで使う

こんにちは。デザイナーの森です。

通常、アプリケーションのグラフィック素材は、PNGなどの画像で扱いますが、動的に色、サイズの変更などが必要な場合、UIBezierPathなどのパスのデータだと扱いやすくなります。

今回はAdobe Illustratorで作成したパスデータを、UIBezierPathとして出力する簡単なスクリプトを紹介したいと思います。

パスデータを扱う手順は下記の通りです。

  1. Illustratorでグラフィックを作成
  2. スクリプトを使って選択したパスを出力
  3. 出力したパスのデータをCAShapeLayerのカテゴリーとして使用
  4. 必要ならば、UIImageに変換

それでは順を追って解説していきます。

Illustratorでグラフィックを作成

Illustratorを使ってグラフィックを作成していきます。 この場合、出力されるパスはアートボードの座標となりますので、完成サイズのアートボードを作成し、その中にグラフィックを作成していきます。

f:id:cou_z:20170617194847p:plain

スクリプトを使って選択したパスを出力

IllustratorはJavaScriptを使って制御できますので、作成したパスをスクリプトを使って取り出していきます。 使用するスクリプトファイルを、Illustratorのスクリプトフォルダに追加するか、「ファイル」→「スクリプト」→「その他のスクリプト…」から任意の場所にあるスクリプトを実行します。

パスの出力JS

上記のスクリプトを使ってパスを取得していきます。

選択されたパスのアンカーポイントと方向点を取得し、AdobeのExtendScript ToolkitのコンソールにUIBezierPathのフォーマットで出力していきます。

f:id:cou_z:20170617194931p:plain

パスのグループや複合オブジェクトなどは考慮していませんので、出力の際にはグループ解除などが必要です。

f:id:cou_z:20170617194944p:plain

出力したパスのデータをCAShapeLayerのカテゴリーに

取得したパスデータをその都度コードに入れていってもいいのですが、CAShapeLayerなどのカテゴリーにしておくと扱いやすいです。

CAShapeLayer+customShape

CGFloat iconWidth = 200.0f;
CAShapeLayer *star = [CAShapeLayer starIconWithFrame:CGRectMake((self.frame.size.width - iconWidth)/2,
                                                                iconWidth,
                                                                iconWidth,
                                                                iconWidth)];
star.fillColor = [UIColor colorWithRed:0/255.0 green:177/255.0 blue:255/255.0 alpha:1.0f].CGColor;
[self.layer addSublayer:star];

f:id:cou_z:20170617195221p:plain

UIImageに変換

作成したグラフィックをUIButton用のイメージなど、画像として使いたい場合もありますので、 下記のようなUIImageのカテゴリを作っておくと便利です。

@implementation UIImage (shapeRender)
+ (UIImage *)imageWithShapeLayer:(CAShapeLayer *)shapeLayer
{
    UIGraphicsBeginImageContextWithOptions(shapeLayer.frame.size, NO, [UIScreen mainScreen].scale);
    [shapeLayer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}
@end
UIImage+shapeRender

小さなツール

こういったスクリプトは、その都度簡単に作っては修正を繰り返して使っています。普段使っているものを、またいくつか紹介したいと思います。