今回はiOSで簡単に高機能のお絵かき画面を作成できる、ACEDrawingViewの紹介をします。
とりあえずGithub
使用可能な環境
・iOS7以上
・Objective-Cで作成されているのでSwiftでも使用可能
インストール
CocoaPodsを使用しましょう。
PodFileに以下の記述を追加してpod installしましょう。
pod 'ACEDrawingView'
もしくは、Githubからダウンロードしてソースファイルをプロジェクトに追加します。
描画ツール一覧
| ツール名 | サンプル |
|---|---|
| ACEDrawingToolTypePen |  |
| ACEDrawingToolTypeEraser |  |
| ACEDrawingToolTypeArrow |  |
| ACEDrawingToolTypeLine |  |
| ACEDrawingToolTypeRectagleStroke |  |
| ACEDrawingToolTypeRectagleFill |  |
| ACEDrawingToolTypeEllipseStroke |  |
| ACEDrawingToolTypeEllipseFill |  |
| ACEDrawingToolTypeDraggableText |  |
導入方法
1.UIViewのカスタムクラスに設定する。
ACEDrawingViewをUIViewのカスタムクラスに設定しましょう。
この時点で、アプリをビルドするとペンツールで絵を描けるようになります。
2.Delegate
デリゲートは以下のものです。
@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を使う際によく使ういくつかのメソッドを紹介します。
// 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の話とかも書こうかなーって思いました:-)
→書きました
イグアナアイコンで浮いてるね🦎
