Objective-C
iOS
Swift

iOSのお絵かきライブラリ「ACEDrawingView」の紹介

今回はiOSで簡単に高機能のお絵かき画面を作成できる、ACEDrawingViewの紹介をします。

とりあえずGithub

ACEDrawingView

使用可能な環境

・iOS7以上
・Objective-Cで作成されているのでSwiftでも使用可能

インストール

CocoaPodsを使用しましょう。
PodFileに以下の記述を追加してpod installしましょう。

PodFile
pod 'ACEDrawingView'

もしくは、Githubからダウンロードしてソースファイルをプロジェクトに追加します。

描画ツール一覧

ツール名 サンプル
ACEDrawingToolTypePen スクリーンショット 2017-12-13 21.19.40.png
ACEDrawingToolTypeEraser スクリーンショット 2017-12-13 21.21.50.png
ACEDrawingToolTypeArrow スクリーンショット 2017-12-13 21.24.18.png
ACEDrawingToolTypeLine スクリーンショット 2017-12-13 21.27.21.png
ACEDrawingToolTypeRectagleStroke スクリーンショット 2017-12-13 21.29.39.png
ACEDrawingToolTypeRectagleFill スクリーンショット 2017-12-13 21.30.16.png
ACEDrawingToolTypeEllipseStroke スクリーンショット 2017-12-13 21.32.25.png
ACEDrawingToolTypeEllipseFill スクリーンショット 2017-12-13 21.33.31.png
ACEDrawingToolTypeDraggableText スクリーンショット 2017-12-13 21.34.21.png

導入方法

1.UIViewのカスタムクラスに設定する。

ACEDrawingViewをUIViewのカスタムクラスに設定しましょう。
スクリーンショット 2017-12-13 21.40.57.png

この時点で、アプリをビルドするとペンツールで絵を描けるようになります。

2.Delegate

デリゲートは以下のものです。

ACEDrawingViewDelegate
@protocol ACEDrawingViewDelegate <NSObject>

@optional
- (void)drawingView:(ACEDrawingView *)view willBeginDrawUsingTool:(id<ACEDrawingTool>)tool;
- (void)drawingView:(ACEDrawingView *)view didEndDrawUsingTool:(id<ACEDrawingTool>)tool;
- (void)drawingView:(ACEDrawingView *)view didRedoDrawUsingTool:(id<ACEDrawingTool>)tool;
- (void)drawingView:(ACEDrawingView *)view didUndoDrawUsingTool:(id<ACEDrawingTool>)tool;

@end

willBeignDrawUsingTool

このメソッドは、描画開始前に呼ばれるメソッドです。

didEndDrawUsingTool

このメソッドは、描画終了直後に呼ばれるメソッドです。
このタイミングで戻るボタンや、やり直すボタンの制御を行ったりするといいと思います。

didRedoDrawUsingTool

Redoを行った直後の呼ばれるメソッドです。

didUndoDrawUsingTool

Undoを行った直後に呼ばれるメソッドです。

3.ACEDrawingViewの主要なプロパティ

ACEDrawingViewを使う際によく使うプロパティです。

プロパティ名 説明
delegate id<ACEDrawingViewDelegate> デリゲート
drawTool ACEDrawingToolType(Enum) 描画ツール
drawMode ACEDrawingMode(Enum) 背景画像の読み込み方法の設定
lineColor UIColor 描画色
lineAlpha CGFloat 描画色のアルファ値
lineWidth CGFloat 描画時の線の太さ
image UIImage 編集後の画像
backgroundImage UIImage 読み込んだ背景画像

4.ACEDrawingViewの主要なメソッド

ACEDrawingViewを使う際によく使ういくつかのメソッドを紹介します。

ACEDrawingView.h
// load external image
- (void)loadImage:(UIImage *)image;
- (void)loadImageData:(NSData *)imageData;

// erase all
- (void)clear;

// undo / redo
- (BOOL)canUndo;
- (void)undoLatestStep;

- (BOOL)canRedo;
- (void)redoLatestStep;

背景画像の読み込みをしたい場合

- (void)loadImage:(UIImage *)image;
- (void)loadImageData:(NSData *)imageData;

loadImage系のメソッドを使うことでUIImageまたは、NSDataから背景画像を設定することができます。
drawModeプロパティで読み込み方法を設定を変更することができます。
初期状態では、Viewのサイズに画像が引き伸ばされるので注意が必要です。

クリアをしたい場合

- (void)clear;

clearメソッドを使用することで描画内容をクリアすることができます。

Undo/Redoができるか確認したい場合

- (BOOL)canUndo;
- (BOOL)canRedo;

これらのメソッドを使用すれば、使用時のACEDrawingViewの状態から、Undo/Redoができるかを判定することができます。
これらを利用して、戻るボタンや、やり直すボタンを制御しましょう。

Undo/Redoを行いたい場合

- (void)undoLatestStep;
- (void)redoLatestStep;

実際にUndoやRedoを行うには上記のメソッドを使用します。
ボタンのアクション時に実行するといいでしょう。

まとめ

簡単にお絵かき機能を実装することができるので、派生してサイン機能とかも作れますね。

余談

なんでこの記事を書こうって思ったかっていうと、この前少し触っててちょっとしたバグを見つけたから修正して、勇気を出して生まれて初めてのプルリクエストを送ったらマージしてもらえて嬉しかったからです:-)

その時の話も含めて今度Githubの話とかも書こうかなーって思いました:-)
書きました

イグアナアイコンで浮いてるね🦎
スクリーンショット_2017-12-13_23_23_30.png