[iOS] 超簡単！ACEDrawingView でお絵描きアプリを作ってみよう

はじめに

今回は、簡単にお絵描きアプリが作れてしまうACEDrawingViewをご紹介します。 ACEDrawingViewはお絵描き機能を簡単に導入出来るうえに、UIの部分は自由に作ることが出来ます。

この記事では、最低限の機能を一番簡単に導入する方法と、描画の種類や色などを設定するプロパティ等をご紹介したいと思います。

環境

今回は下記で試してます。

インストール方法

新規でプロジェクトを作った後、（プロジェクトテンプレートはSingleViewApplicationでOKです） CocoaPods で

pod 'ACEDrawingView'

pod installでインストール完了です。

最短実装

1. Main.storyboardを開きます
2. 最初の画面のViewControllerに対して、UIViewを追加します。(レイアウトも調整します)
3. 追加してUIViewのクラスにACEDrawingViewを設定します。

・・・以上です。( ﾟдﾟ) タイムアタック出来そうな感じのお手軽さです。

実行するとタッチでお絵描きが出来ます。

このままだと、ペンの太さや色など変更出来ないので、きちんとUIを作る必要はあります。

各種プロパティ

描画タイプ

ペンや図形など描画タイプを切り替える事が出来ます。

コードサンプル

// 描画タイプを線にする
self.drawingView.drawTool = ACEDrawingToolTypeLine;

ACEDrawingToolTypeには以下の種類があります

カラー

描画する色を設定します。

コードサンプル

// 描画色を赤にする
self.drawingView.lineColor = [UIColor redColor];

線の太さ

ペンや図形線の太さを設定します。単位はポイントです。

コードサンプル

self.drawingView.lineWidth = 5.0f;

アルファ

描画の透明度を(0.0〜1.0)の間で設定します。0が透明です。

コードサンプル

self.drawingView.lineAlpha = 0.5f;

Undo

Undoを実行します。

コードサンプル

// undoを実行する
[self.drawingView undoLatestStep];

Undo可能かどうか

Undo処理の可否をBOOL値で返します。 YESであればUndoを実行できる事ができます。

コードサンプル

// Undoできるかどうかでボタンの状態を切り替える
self.undoButton.enabled = [self.drawingView canUndo];

Undo可能ステップ数

Undoすることが可能なステップ数を取得出来ます。（読み取り専用）

Redo

Redoを実行します。

コードサンプル

// redoを実行する
[self.drawingView redoLatestStep];

Redo可能かどうか

Redo処理の可否をBOOL値で返します。 YESであればRedoを実行できる事ができます。

コードサンプル

// Redoできるかどうかでボタンの状態を切り替える
self.redoButton.enabled = [self.drawingView canRedo];

Redo可能ステップ数

Redoすることが可能なステップ数を取得出来ます。（読み取り専用）

全消し

全て削除します。Undo/Redoの状態もクリアされます。

コードサンプル

// 全てを削除します
[self.drawingView clear];

画像のロード

指定した画像を読み込む事が出来ます。そのままいれると、アスペクト比を無視してビューのサイズに合わせた縮尺になるので、入れる前に一工夫が必要になります。

コードサンプル

// sample画像を読み込む
[self.drawingView loadImage:[UIImage imageNamed:@"sample"]];

また、引数がNSDataのloadImageData:(NSData *)imageDataも用意されています。

保存

描いたものをUIImageで取得できます。（読み取り専用） 端末のアルバム等に保存する処理は自分で実装する必要があります。

ACEDrawingViewDelegate

任意で下記のDelegateを実装することが出来ます。

描画開始

- (void)drawingView:(ACEDrawingView *)view willBeginDrawUsingTool:(id<ACEDrawingTool>)tool;

• view 描画対象のACEDrawingView
• tool 描画タイプ

描画終了

- (void)drawingView:(ACEDrawingView *)view didEndDrawUsingTool:(id<ACEDrawingTool>)tool;

• view 描画対象のACEDrawingView
• tool 描画タイプ

さいごに

お絵描きアプリがこんなに簡単に作れてしまうのって凄いと思います。 興味のある方は、ぜひお試し下さいー(・▽<)☆彡 オススメです。