みなさんこんにちは!
イザナギです!
//ベジェ曲線の利用
var bezier:UIBezierPath!
//画像の変数
var Image:UIImage!
//サインする場所
@IBOutlet var canvas: UIImageView!
//クリアボタンの動作
@IBAction func clear_button(_ sender: Any) {
clear()
}
//saveボタン
@IBAction func save_button(_ sender: Any) {
saveImage(image: Image)
}
override func viewDidLoad() {
super.viewDidLoad()
//書くところ(canvas)についての設定
canvas = UIImageView()
canvas.frame = CGRect(x:105,y:295,width:835,height:330)
canvas.backgroundColor = UIColor.clear
self.view.addSubview(canvas)
}
//タッチイベント
override func touchesBegan(_ touches: Set, with event:UIEvent?){
//タッチ時のイベントを習得
let touchEvent = touches.first!
//タッチしている座標を習得
let currentPoint:CGPoint = touchEvent.location(in: self.canvas)
bezier = UIBezierPath()
//ペンの太さ
bezier.lineWidth = 10.0
//ペンのスタイル
bezier.lineCapStyle = .butt
//支点に現在タッチしている位置をセット
bezier.move(to:currentPoint)
}
//ドラックイベント
override func touchesMoved(_ touches: Set, with event:UIEvent?) {
//タッチ開始時bizierを初期化していない場合処理終了
if bezier == nil {
return
}
//タッチ時のイベント習得
let touchEvent = touches.first!
//タッチしている座標取得
let currentPoint:CGPoint = touchEvent.location(in: self.canvas)
//ベジェ曲線を描く
bezier.addLine(to: currentPoint)
//描写メソッド(後述)
drawLine(path: bezier)
}
//指を離した時のイベント
override func touchesEnded(_ touches: Set, with event: UIEvent?) {
if bezier == nil {
return
}
let touchEvent = touches.first!
let currentPoint:CGPoint = touchEvent.location(in: canvas)
bezier.addLine(to: currentPoint)
drawLine(path: bezier)
//Imageにcanvasのimageを保存
self.Image = canvas.image
}
//描画処理
func drawLine(path:UIBezierPath){
UIGraphicsBeginImageContext(canvas.frame.size)
if let image = self.Image {
image.draw(at: CGPoint.zero)
}
//線のカラー
let lineColor = UIColor.black
//線のスタイル
lineColor.setStroke()
path.stroke()
//canvasに画像を表示
self.canvas.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
}
func clear(){
Image = nil
canvas.image = nil
}
//画像を写真ライブラリに追加(端末内)
func saveImage (image: UIImage) {
UIImageWriteToSavedPhotosAlbum(image,self,nil,nil)
}
UIImageWriteToSavedPhotosAlbum(image,self,nil,nil)
UIImageWriteToSavedPhotosAlbum(image,self,#selector(self.didFinishSavingImage(_:didFinishSavingWithError:contextInfo:)),nil)
@objc func didFinishSavingImage(_ image: UIImage, didFinishSavingWithError error: NSError!, contextInfo: UnsafeMutableRawPointer) {
// 結果によって出すアラートを変更する
var title = "保存完了"
var message = "カメラロールに保存しました"
if error != nil {
title = "エラー"
message = "保存に失敗しました"
}
let alertController = UIAlertController(title: title, message: message, preferredStyle: .alert)
alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
self.present(alertController, animated: true, completion: nil)
}
まとめ
完成するとこんな感じになります。シミュレーターを使用しているため字が汚いのはご了承ください。www

いや〜、できましたね!
今回は、下のサイトを参考にさせてもらい、サイン(お絵かき)ができるアプリケーションを作ってみました。
二つのサイトを組み合わせて作りましたので、詳しくは下記のサイトを見た方がわかりやすいかもしれませんね。
これからは、photoに保存ではなくデータベース(今の所MySQL)に保存できるように改造していきたいと思います。
今回はここで筆を置かせていただきます。
最後までご覧いただきありがとうございました!
参考
【Swift】簡易ペイントを作成してみた。
【Swift4】UIViewをUIImageに変換し、画像としてカメラロールに保存する方法