この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
今回は、簡単にお絵描きアプリが作れてしまうACEDrawingViewをご紹介します。
ACEDrawingViewはお絵描き機能を簡単に導入出来るうえに、UIの部分は自由に作ることが出来ます。
この記事では、最低限の機能を一番簡単に導入する方法と、描画の種類や色などを設定するプロパティ等をご紹介したいと思います。
環境
今回は下記で試してます。
| 項目 | バージョン |
|---|---|
| XCODE | 6.1.1 |
| iOS SDK | 8.1 |
| ACEDrawingView | 1.3.2 |
インストール方法
新規でプロジェクトを作った後、（プロジェクトテンプレートはSingleViewApplicationでOKです） CocoaPods で
pod 'ACEDrawingView'pod installでインストール完了です。
最短実装
- Main.storyboardを開きます
- 最初の画面のViewControllerに対して、UIViewを追加します。(レイアウトも調整します)
- 追加してUIViewのクラスにACEDrawingViewを設定します。
・・・以上です。( ﾟдﾟ) タイムアタック出来そうな感じのお手軽さです。
実行するとタッチでお絵描きが出来ます。
このままだと、ペンの太さや色など変更出来ないので、きちんとUIを作る必要はあります。
各種プロパティ
描画タイプ
ペンや図形など描画タイプを切り替える事が出来ます。
| プロパティ名 | 型 |
|---|---|
| drawTool | ACEDrawingToolType |
コードサンプル
// 描画タイプを線にする
self.drawingView.drawTool = ACEDrawingToolTypeLine;ACEDrawingToolTypeには以下の種類があります
| 説明 | |
|---|---|
| ACEDrawingToolTypePen | ペン |
| ACEDrawingToolTypeLine | 線 |
| ACEDrawingToolTypeRectagleStroke | 四角（線のみ） |
| ACEDrawingToolTypeRectagleFill | 四角（塗りつぶし） |
| ACEDrawingToolTypeEllipseStroke | 円（線のみ） |
| ACEDrawingToolTypeEllipseFill | 円（塗りつぶし） |
| ACEDrawingToolTypeEraser | 消しゴム |
| ACEDrawingToolTypeText | テキスト入力 |
カラー
描画する色を設定します。
| プロパティ名 | 型 |
|---|---|
| lineColor | UIColor |
コードサンプル
// 描画色を赤にする
self.drawingView.lineColor = [UIColor redColor];線の太さ
ペンや図形線の太さを設定します。単位はポイントです。
| プロパティ名 | 型 |
|---|---|
| lineWidth | CGFloat |
コードサンプル
self.drawingView.lineWidth = 5.0f;アルファ
描画の透明度を(0.0〜1.0)の間で設定します。0が透明です。
| プロパティ名 | 型 |
|---|---|
| lineAlpha | CGFloat |
コードサンプル
self.drawingView.lineAlpha = 0.5f;Undo
Undoを実行します。
| メソッド名 | 戻り値 |
|---|---|
| undoLatestStep | 無し |
コードサンプル
// undoを実行する
[self.drawingView undoLatestStep];Undo可能かどうか
Undo処理の可否をBOOL値で返します。 YESであればUndoを実行できる事ができます。
| メソッド名 | 戻り値 |
|---|---|
| canUndo | BOOL |
コードサンプル
// Undoできるかどうかでボタンの状態を切り替える
self.undoButton.enabled = [self.drawingView canUndo];Undo可能ステップ数
Undoすることが可能なステップ数を取得出来ます。（読み取り専用）
| プロパティ名 | 型 |
|---|---|
| undoSteps | NSUInteger |
Redo
Redoを実行します。
| メソッド名 | 戻り値 |
|---|---|
| redoLatestStep | 無し |
コードサンプル
// redoを実行する
[self.drawingView redoLatestStep];Redo可能かどうか
Redo処理の可否をBOOL値で返します。 YESであればRedoを実行できる事ができます。
| メソッド名 | 戻り値 |
|---|---|
| canRedo | BOOL |
コードサンプル
// Redoできるかどうかでボタンの状態を切り替える
self.redoButton.enabled = [self.drawingView canRedo];Redo可能ステップ数
Redoすることが可能なステップ数を取得出来ます。（読み取り専用）
| プロパティ名 | 型 |
|---|---|
| redoSteps | NSUInteger |
全消し
全て削除します。Undo/Redoの状態もクリアされます。
| メソッド名 | 戻り値 |
|---|---|
| clear | 無し |
コードサンプル
// 全てを削除します
[self.drawingView clear];画像のロード
指定した画像を読み込む事が出来ます。そのままいれると、アスペクト比を無視してビューのサイズに合わせた縮尺になるので、入れる前に一工夫が必要になります。
| メソッド名 | 戻り値 |
|---|---|
| loadImage:(UIImage *)image | 無し |
コードサンプル
// sample画像を読み込む
[self.drawingView loadImage:[UIImage imageNamed:@"sample"]];また、引数がNSDataのloadImageData:(NSData *)imageDataも用意されています。
保存
描いたものをUIImageで取得できます。（読み取り専用） 端末のアルバム等に保存する処理は自分で実装する必要があります。
| プロパティ名 | 型 |
|---|---|
| image | 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 描画タイプ
さいごに
お絵描きアプリがこんなに簡単に作れてしまうのって凄いと思います。 興味のある方は、ぜひお試し下さいー(・▽<)☆彡 オススメです。
6
