illustratorで書いた図形をUIBezierPathに変換できるプラグインDrawscriptを使う

UIBezierPathを使えば簡単に図形を描画できます。しかし、プログラミングだけで複雑な図形を表現するのはさすがにしんどいです。

そこで登場するのがこのDrawscript！このプラグインを使うとillustratorで作成した図形をUIBezierPathを使用したコードに変換してくれます。すげー便利！

Drawscriptのダウンロード・インストール

DrawscriptはDrawscript - convert Illustrator shapes into codeからダウンロードできます。DrawscriptはAdobe Extension Managerの拡張機能インストールファイルとして提供されています。このサイトからDrawscript.zxpをダウンロードしましょう。

Drawscript.zxpをダウンロードしたらファイルを開いてインストールしましょう。

Drawscriptの使い方

使い方は非常に簡単です。
まず、図形を描画したら［ウィンドウ＞エクテンション＞Drawscript］をクリックします。

あとは言語にObj-C iOSが選択されていることを確認し、変換したいパスを選択して［Generate］ボタンを押すだけです。

アプリで確認する

出力されたソースをアプリで確認しましょう。ちなみに今回は以下の環境を前提に説明します。

Mac OS X 10.8 Moutain lion
Xcode 4.6.2
iOS SDK 6.1
iPhone 5

プロジェクトの作成

まずは、XcodeよりSingle View Applicationを選択し、以下の内容でプロジェクトを作成しましょう。

確認用のクラスを作成

生成されたUIBezierPathのコードを確認するためのクラスを作成します。DrawscriptSampleプロジェクトにUIViewを継承したクラスDrawViewを作成しましょう。作成したらソースコードを以下のように変更し、生成されたUIBezierPathのコードを貼付けましょう。

DrawView.m

#import "DrawView.h"

@implementation DrawView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    // Drawscriptで書き出したソースコード：開始
    UIColor* strokeColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1];
    UIBezierPath* path = [UIBezierPath bezierPath];
    [path moveToPoint: CGPointMake(142,105)];
    [path addCurveToPoint: CGPointMake(291,105) controlPoint1: CGPointMake(183,64) controlPoint2: CGPointMake(250,64)];
    [path addCurveToPoint: CGPointMake(291,225) controlPoint1: CGPointMake(324,138) controlPoint2: CGPointMake(324,192)];
    [path addCurveToPoint: CGPointMake(196,225) controlPoint1: CGPointMake(265,251) controlPoint2: CGPointMake(222,251)];
    [path addCurveToPoint: CGPointMake(196,148) controlPoint1: CGPointMake(175,203) controlPoint2: CGPointMake(175,169)];
    [path addCurveToPoint: CGPointMake(257,148) controlPoint1: CGPointMake(213,131) controlPoint2: CGPointMake(240,131)];
    [path addCurveToPoint: CGPointMake(257,197) controlPoint1: CGPointMake(270,162) controlPoint2: CGPointMake(270,184)];
    [path addCurveToPoint: CGPointMake(218,197) controlPoint1: CGPointMake(246,208) controlPoint2: CGPointMake(229,208)];
    [path addCurveToPoint: CGPointMake(218,166) controlPoint1: CGPointMake(209,188) controlPoint2: CGPointMake(209,174)];
    [path addCurveToPoint: CGPointMake(243,166) controlPoint1: CGPointMake(225,159) controlPoint2: CGPointMake(236,159)];
    [path addCurveToPoint: CGPointMake(243,186) controlPoint1: CGPointMake(248,171) controlPoint2: CGPointMake(248,180)];
    [strokeColor setStroke];
    path.lineWidth = 1;
    [path stroke];
    // Drawscriptで書き出したソースコード：終了
}

@end

ViewControllerの修正

確認用のクラスを作成したら、ViewControllerのビューに配置します。

#import "ViewController.h"
#import "DrawView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 生成されたUIBezierPathを確認するためのカスタムビューを配置
    DrawView *drawView = [[DrawView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:drawView];
}

@end

実行

サンプルアプリを実行してみましょう。

実行結果

出力結果を見てみると画面の中途半端なところに表示されますが、これはillustratorで描画した図形の位置も計算してUIBezierPathのソースコードが生成されているためです。このようにいったんUIBezierPathに変換してしまえばあとは回転するなり縮小するなり自由にプログラムから変更して使いましょう！また、DrawscriptではObjective-CだけでなくJS CanvasやCreateJS、ActionScriptなどのコードも生成してくれるようです。すげー便利！