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

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

Clock Icon2013.05.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

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

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

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

ios_drawscript_1

Drawscriptの使い方

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

ios_drawscript_2

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

ios_drawscript_3

アプリで確認する

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

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

プロジェクトの作成

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

項目 設定値
Product Name DrawrectSample
Organization Name 自分の名前(サンプルなのでテキトー)
Company Identifier 会社名(サンプルなのでテキトー)
Class Prefix なし
Devices iPhone
Use Storyboards チェックする(ストーリーボードを使用)
Use Automatic Reference Counting チェックする(ARC有効)
Include Unit Tests チェックしない(unit testのターゲットを含まない)

確認用のクラスを作成

生成された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

実行

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

実行結果

ios_drawscript_4

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

この記事をシェアする

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.