Swift（iOS）でお絵描きViewを追加する

ユーザーに指で描画してもらいたい

iPhoneをタッチして絵を描いてもらいたい場合、どのようにお絵描きできるViewを追加すればいいのでしょうか？

ライブラリを追加すればOK

お絵描きライブラリはいろいろありますが、今回はこれで。

インストール

Swift Package Manager、Carthage、ファイルのドラッグ&ドロップ、の方法がありますが、僕のお気に入りはSwift Package Managerです。

使う

とりあえず描く

import UIKit
import Drawsana

let drawingView = DrawsanaView()
let penTool = PenTool()
let imageView = UIImageView()

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        drawingView.set(tool: penTool)
        drawingView.userSettings.strokeWidth = 10
        drawingView.userSettings.strokeColor = .black
        drawingView.userSettings.fillColor = .yellow
        drawingView.userSettings.fontSize = 24
        drawingView.userSettings.fontName = "Marker Felt"
        drawingView.frame = view.bounds
        view.addSubview(drawingView)
    }
}

これで描画ができる。

機能

消す

drawingView.operationStack.undo() // undo
drawingView.operationStack.redo() // redo
drawingView.set(tool: EraserTool()) // 消しゴムにする

保存

// フォトライブラリに保存
func saveFinalImage() {
    let image:UIImage? = drawingView.render()
    imageView.image = image
    UIImageWriteToSavedPhotosAlbum(image!, self, nil, nil)
}

// UIImageにオーバーラップさせる。drawingViewと同じサイズのUIImageViewを後ろに置いて描画すれば、ちょうどサイズを合わせてオーバーラップしてくれる。
func saveImageOnImage(_ backgroundUIImage:UIImage) {
    let overlapImage:UIImage? = drawingView.render(over:backgroundUIImage)
    imageView.image = overlapImage)
    UIImageWriteToSavedPhotosAlbum(overlapImage!, self, nil, nil)
}


// 以下はDrawingオブジェクトとして扱う場合。

func save() {
  let jsonEncoder = JSONEncoder()
  jsonEncoder.outputFormatting = [.prettyPrinted, .sortedKeys]
  let jsonData = try! jsonEncoder.encode(drawingView.drawing)
  // store jsonData somewhere
}

func load() {
  let data = Data()// load data from somewhere
  let jsonDecoder = JSONDecoder()
  let drawing = try! jsonDecoder.decode(Drawing.self, from: data)
  drawingView.drawing = drawing
}

いろいろな機能を試してみたければ、リポジトリのデモフォルダからViewControllerとColorPickerViewControllerとToolPickerViewControllerをコピーするのがおすすめ。

全ての機能はドキュメントで。

🐣

---

フリーランスエンジニアです。
お仕事のご相談こちらまで
[e-mail]

機械学習、ARアプリ（Web/iOS）を作っています。
機械学習／AR関連の情報を発信しています。

Twitter
Medium
GitHub