Help us understand the problem. What is going on with this article?

KMZDrawViewでかんたんお絵描きビュー

More than 5 years have passed since last update.

こんにちは。29日担当のkenmazです。

ところで皆さんお絵描き好きですよね。僕も好きです。ということで、iOSアプリに簡単にお絵描き機能を埋め込むことができるKMZDrawViewというライブラリを作ったので、簡単に紹介します。

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を使わない場合であれば、例えば以下の様なコードになります。

ViewController.m
@implementation ViewController

- (void)loadView {
    CGRect rect = [[UIScreen mainScreen] applicationFrame];
    KMZDrawView* drawView = [[KMZDrawView alloc] initWithFrame:rect];
    self.view = drawView;
}

とりあえずこれだけで、超単純なお絵描きアプリが完成です。アプリを起動すると真っ白なスクリーンが表示され、自由にお絵描きができるようになります。

image

線幅と色の指定

penColorとpenWidthプロパティを指定すれば、線の色と幅を指定できます。

    drawView.penColor = [UIColor redColor];
    drawView.penWidth = 20;

image

消しゴムモード

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付属のサンプルコードを参考にしてください。
サンプルコード

image

※著作権保護の観点からボカシを入れています

UIImageとして取得

KMZDrawViewで描画した内容はimageプロパティを参照することで、UIImageオブジェクトとして取得できます。UIImagePNGRepresentation関数などを使ってNSData化して、ローカルに保存したりネットにアップするなどすれば便利でしょう。

    UIImage* image = drawView.image;
    NSData *data = UIImagePNGRepresentation(image);  
    //dataを保存する処理など・・・

まとめ

簡単でしたがKMZDrawViewをご紹介しました。必要最小限の機能しかありませんが、自分のアプリにお絵描き機能を組み込みたいな、と思ったらサクっと使えるようになっていると思うので、皆さんぜひ使ってみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away