こんにちは。29日担当のkenmazです。
ところで皆さんお絵描き好きですよね。僕も好きです。ということで、iOSアプリに簡単にお絵描き機能を埋め込むことができるKMZDrawViewというライブラリを作ったので、簡単に紹介します。
KMZDrawViewについて
KMZDrawViewは以下で公開しています。
KMZDrawViewが提供するビューをアプリに組み込むことで以下のような機能が使えるようになります。
- タッチ操作による線の描画
- 消しゴム機能
- 色、線幅の指定
- アンドゥ・リドゥ
- 描画した画像をUIImageオブジェクトに変換
簡単な使い方
インストール
CocoaPodsでインストール
【CocoaPodsでインストール可能になりました。】
pod "KMZDrawView"
KMZDrawViewをaddSubViewするだけでお絵描きできるビューが表示されます。
Get Started で簡単に紹介しています。
libフォルダをプロジェクトに取り込み
githubからソースコードをcloneできたら、KMZDrawView/KMZDraw /libフォルダを自分のプロジェクトに取り込みます。
CoreGraphics.frameworkの追加
CoreGraphics.frameworkがリンクされていない場合は、プロジェクト設定の、Build Phases > Link Binary With Librariesの項目に「CoreGraphics.framework」を追加しておきます。
KMZDrawViewの組み込み
ライブラリが提供するKMZDrawViewはUIView (UIImageView)の単純なサブクラスなので、通常のビューと同じようにアプリのビュー階層に追加します。IBを使わない場合であれば、例えば以下の様なコードになります。
@implementation ViewController
- (void)loadView {
CGRect rect = [[UIScreen mainScreen] applicationFrame];
KMZDrawView* drawView = [[KMZDrawView alloc] initWithFrame:rect];
self.view = drawView;
}
とりあえずこれだけで、超単純なお絵描きアプリが完成です。アプリを起動すると真っ白なスクリーンが表示され、自由にお絵描きができるようになります。
線幅と色の指定
penColorとpenWidthプロパティを指定すれば、線の色と幅を指定できます。
drawView.penColor = [UIColor redColor];
drawView.penWidth = 20;
消しゴムモード
penModeプロパティにKMZLinePenModeEraserを指定すれば、消しゴムモードになります（これは実質的にペン色を背景色＝白にしているだけです）。
drawView.penMode = KMZLinePenModeEraser;
penModeにKMZLinePenModePencilをセットして鉛筆モードにすれば、元通りお絵描きをできます。KMZLinePenModeの定義は以下のとおりです。
enum {
KMZLinePenModePencil,
KMZLinePenModeEraser
};
typedef NSUInteger KMZLinePenMode;
アンドゥ・リドゥ
KMZDrawView#undo、KMZDrawView#redoメソッドを使えばアンドゥ・リドゥを実現できます。KMZDrawView#isUndoable, KMZDrawView#isRedoableメソッドを使えばアンドゥ・リドゥ可能かどうかをチェックできるので、例えばアンドゥボタンを押した時に以下のようなアクションが実行されるようにしておけばよいでしょう。
- (IBAction)touchUndoButton:(id)sender {
if ([self.drawView isUndoable]) {
[self.drawView undo];
}
}
このあたりはKMZDrawView付属のサンプルコードを参考にしてください。
サンプルコード
※著作権保護の観点からボカシを入れています
UIImageとして取得
KMZDrawViewで描画した内容はimageプロパティを参照することで、UIImageオブジェクトとして取得できます。UIImagePNGRepresentation関数などを使ってNSData化して、ローカルに保存したりネットにアップするなどすれば便利でしょう。
UIImage* image = drawView.image;
NSData *data = UIImagePNGRepresentation(image);
//dataを保存する処理など・・・
まとめ
簡単でしたがKMZDrawViewをご紹介しました。必要最小限の機能しかありませんが、自分のアプリにお絵描き機能を組み込みたいな、と思ったらサクっと使えるようになっていると思うので、皆さんぜひ使ってみてください。