ユーザーに指で描画してもらいたい
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をコピーするのがおすすめ。
全ての機能はドキュメントで。
🐣
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com
機械学習、ARアプリ（Web/iOS）を作っています。
機械学習／AR関連の情報を発信しています。