Libra Studio Log

開発に関することやゲーム、ガジェットなどについてつらつらと書き記しています

Swift製お絵描きライブラリを作ってみました

f:id:daihase:20190809100049p:plain

こんばんは、daihaseです。 1年ぶりくらいにSwiftでOSSを作ってみました。

github.com

こちら、実は既にアプリで導入実績のあるライブラリです。

Doodle Maker -写真にお絵描き&イラスト-

こちらのアプリはAndroid版もリリースされているのですが、合わせてまだ10万DLくらいしかいってなく若干お絵描きアプリもストアに大量にあるので、相当差別化していかないと難しい世界な気はしています...。

またAndroidの方も5年程前にJavaで作ったのですが、基本的にはこのSwift製ライブラリとロジックは同じ感じです。UndoやRedoの考え方なんかはまんま同じですね。あとは綺麗な曲線を描くとか。

おそらくお絵描きアプリの最初の登竜門はこの辺かと思いますので、そこをライブラリに全部任せてしまって、後はアイデア勝負でよりライブラリを活かして便利で使いやすいアプリを開発していけると一番いいですね。

なお上記アプリ(iOS)の方ではピンチによるズーム、塗り絵機能的なものや写真加工など色々他にも独自に組んでいるものが多く、今回のライブラリにはここまでは搭載されていません。

とはいえこれ系のは比較的簡単に作れますので是非挑戦してみてください。

話をライブラリに戻し、こちらですがStoryboardでもコードベースでもどちらでも簡単に設置し、すぐに使うことが出来ます。

GitHubのREADMEにも説明がありますが、Storyboardを使う場合はUIViewを配置したいサイズで乗っけてやるだけで、いきなりペンで絵が描けるようになります。

コードでセットするのも超簡単!

import Sketch

   override func viewDidLoad() {
        super.viewDidLoad()

        let sketchView = SketchView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
        view.addSubview(sketchView)
    }

こんな感じにSketchViewのインスタンスを作ってやって、あとはViewにaddSubviewするだけです。インスタンスを生成する際に好きな縦横サイズを指定でき、その範囲内だけお絵描き可能なViewが出来上がる感じです。

サンプルを見てもらえればSwiftをちょっと触ったことのある方なら直ぐに直感で使えるようになっているかと思います。

実装方法を添えて、簡単に機能を紹介を紹介したいと思います。

色を変える

sketchView.lineColor = UIColor.red

ペンの種類を変える(ブラー、ネオン)

// ブラー
sketchView.drawingPenType = PenType.blur

// ネオン
sketchView.drawingPenType = PenType.neon

全消し

sketchView.clear()

モードを変更する(ペン、消しゴム、スタンプ、図形)

// ペン
sketchView.drawTool = SketchToolType.pen
// 消しゴム
sketchView.drawTool = SketchToolType.eraser
// スタンプ
sketchView.drawTool = SketchToolType.stamp
// 直線
sketchView.drawTool = SketchToolType.line
// 矢印
sketchView.drawTool = SketchToolType.arrow
// 四角
sketchView.drawTool = SketchToolType.rectangleStroke
// 四角(塗りつぶし)
sketchView.drawTool = SketchToolType.rectangleFill
// 丸
sketchView.drawTool = SketchToolType.ellipseStroke
// 丸(塗りつぶし)
sketchView.drawTool = SketchToolType.ellipseFill

Undo、Redo

// Undo
sketchView.undo()
// Redo
sketchView.redo()

画像読み込み

sketchView.loadImage(image: "sample.png")

ザッとあげるとこんな感じになります。 基本的にお絵描きアプリで必要な機能は、簡単にメソッド呼び出しやプロパティセットすることで対応出来るようになってます。

もともと子供向けのお絵描きアプリのために実装したコードで、その時は特にOSS化とか何も考えてなかったのであれですが、出来れば今後も色々機能追加していければと考えています。

後は個人的に他のペンの種類(例えばクレヨンとか...)を増やしたいと思ってはいますが、まだ良い方法が思い浮かばず...PRなど投げて誰か作ってくれると嬉しいです。

それでは良い開発ライフを〜