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

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

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

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

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

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

Illustratorでグラフィックを作成

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

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

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

パスの出力JS

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

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

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

出力したパスのデータを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];

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