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


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

#とりあえずGithub

[ACEDrawingView](https://github.com/acerbetti/ACEDrawingView)

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

#インストール

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

```ruby:PodFile
pod 'ACEDrawingView'
```

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

#描画ツール一覧
| ツール名 | サンプル |
|--------|:--------:|
|ACEDrawingToolTypePen| ![スクリーンショット 2017-12-13 21.19.40.png](https://qiita-image-store.s3.amazonaws.com/0/152335/e2b1e0a0-fa9e-0d39-ce93-389b99035a55.png "スクリーンショット 2017-12-13 21.19.40.png")|
|ACEDrawingToolTypeEraser|![スクリーンショット 2017-12-13 21.21.50.png](https://qiita-image-store.s3.amazonaws.com/0/152335/0dcd246e-fb8d-7b9e-3231-00d52d37bb32.png "スクリーンショット 2017-12-13 21.21.50.png")|
|ACEDrawingToolTypeArrow|![スクリーンショット 2017-12-13 21.24.18.png](https://qiita-image-store.s3.amazonaws.com/0/152335/97ca689a-1883-74d6-4bbd-4a5b0711893c.png "スクリーンショット 2017-12-13 21.24.18.png")|
|ACEDrawingToolTypeLine|![スクリーンショット 2017-12-13 21.27.21.png](https://qiita-image-store.s3.amazonaws.com/0/152335/f32a2415-925b-142d-5f9e-039bc04f3d7c.png "スクリーンショット 2017-12-13 21.27.21.png")|
|ACEDrawingToolTypeRectagleStroke|![スクリーンショット 2017-12-13 21.29.39.png](https://qiita-image-store.s3.amazonaws.com/0/152335/4d2109cf-0c9c-8ed0-0ebd-557be097e45e.png "スクリーンショット 2017-12-13 21.29.39.png")|
|ACEDrawingToolTypeRectagleFill|![スクリーンショット 2017-12-13 21.30.16.png](https://qiita-image-store.s3.amazonaws.com/0/152335/ea7d7ad3-d3ff-aeff-f082-b734f67f0ddc.png "スクリーンショット 2017-12-13 21.30.16.png")|
|ACEDrawingToolTypeEllipseStroke|![スクリーンショット 2017-12-13 21.32.25.png](https://qiita-image-store.s3.amazonaws.com/0/152335/61882d5a-90a3-1fc6-be39-d3d22f21618d.png "スクリーンショット 2017-12-13 21.32.25.png")|
|ACEDrawingToolTypeEllipseFill|![スクリーンショット 2017-12-13 21.33.31.png](https://qiita-image-store.s3.amazonaws.com/0/152335/52cce1ac-4bfb-055a-d3aa-987a95921ce4.png "スクリーンショット 2017-12-13 21.33.31.png")|
|ACEDrawingToolTypeDraggableText|![スクリーンショット 2017-12-13 21.34.21.png](https://qiita-image-store.s3.amazonaws.com/0/152335/5946132c-47c7-a31c-0f8a-f8d8f4bbdf27.png "スクリーンショット 2017-12-13 21.34.21.png")|

#導入方法

##1.UIViewのカスタムクラスに設定する。
ACEDrawingViewをUIViewのカスタムクラスに設定しましょう。
![スクリーンショット 2017-12-13 21.40.57.png](https://qiita-image-store.s3.amazonaws.com/0/152335/9c0f045c-7309-bcf3-3a5a-b0a489d87cbf.png "スクリーンショット 2017-12-13 21.40.57.png")

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

##2.Delegate

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

```objc: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を使う際によく使ういくつかのメソッドを紹介します。

```objc: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;
```

###背景画像の読み込みをしたい場合
```objc:
- (void)loadImage:(UIImage *)image;
- (void)loadImageData:(NSData *)imageData;
```

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

###クリアをしたい場合
```objc:
- (void)clear;
```

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

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

```objc:
- (BOOL)canUndo;
- (BOOL)canRedo;
```

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

###Undo/Redoを行いたい場合

```objc:
- (void)undoLatestStep;
- (void)redoLatestStep;
```

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

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

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

その時の話も含めて今度Githubの話とかも書こうかなーって思いました:-)
→[書きました](https://qiita.com/PKPK-Carnage/items/ca9007cc20f287aa04ee)

イグアナアイコンで浮いてるね🦎
![スクリーンショット_2017-12-13_23_23_30.png](https://qiita-image-store.s3.amazonaws.com/0/152335/3610b0a3-fe12-1e57-ef08-5a91d5efb77d.png "スクリーンショット_2017-12-13_23_23_30.png")