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

ios1-100x100

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

はじめに

118640

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

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

環境

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

項目 バージョン
XCODE 6.1.1
iOS SDK 8.1
ACEDrawingView 1.3.2

インストール方法

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

pod 'ACEDrawingView'

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

最短実装

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

Main_storyboard

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

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

実行画面

このままだと、ペンの太さや色など変更出来ないので、きちんと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 描画タイプ

さいごに

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