Swiftでサインを保存できるメソッドをご紹介！

みなさんこんにちは！
イザナギです！
さて、この記事を見ている方はおそらくSwiftで開発をしている、もしくは興味を持っている方々だと思います。
実際私も、興味を持ったのでSwiftでの開発を始めました！
初め「何作ろうかな？」って考えました。その時ちょうど買った「iPad」でお絵かきアプリ作れんじゃね？と思いました。
なので、今回はSwiftを使って、お絵かきができるIOSアプリケーションを作成していこうと思い余す！

ツールをご紹介！

初めに私が使用したツールをご紹介したいと思います。
使用したツール以下の通りです。

• Xcode：Version 10.2.1
• macOS: Mojave Version 10.14.5
• IOSシミュレーター　iPad（6th）
• Swift

実装していく！

では、作成していきたいと思います！まずは変数を設定します。
今回扱う変数は以下の三つです。

//ベジェ曲線の利用
var bezier:UIBezierPath!
//画像の変数
var Image:UIImage!
//サインする場所
@IBOutlet  var canvas: UIImageView!  

３つ目の変数は、imageviewを利用していますので、ストーリーボードに設置して関連づけておいてください。
ここでなかなか聴き慣れないものが出てきましたね。
そう、「ベジェ曲線」！

ベジェ曲線とは？

「ベジェ曲線」とは、コンピューター上で滑らかな曲線を描け、形が整いやすいそうです。

ボタンの設置

今回は、画像をphotoフォルダーに保存する「saveボタン」と書いたサインをクリアする「clearボタン」を設置します。
メインストーリーボード内でボタンを設置し、右クリックを押し「touch down」を選択し関連づけてください。

//クリアボタンの動作
@IBAction func clear_button(_ sender: Any) {
     clear()
 }
//saveボタン
@IBAction func save_button(_ sender: Any) {
      saveImage(image: Image)
}

ボタンの中には、のちに定義するメソッドを入れてあります。

viewDidLoad()について

次にはじめに呼び出される「viewDidLoad()」でアプリを開いた時の処理を書いていきます。

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)
}

drawLine()メソッドは持ちに定義します。

離した時のメソッド

指などを離した時のメソッドです。

//指を離した時のイベント
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
}

描写の処理（drawLine()メソッド）

//描画処理
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()
}

ボタンの処理を定義（save,clear）

func clear(){
    Image = nil
    canvas.image = nil
}

//画像を写真ライブラリに追加（端末内）
func saveImage (image: UIImage) {
    UIImageWriteToSavedPhotosAlbum(image,self,nil,nil)
}

clearメソッドは変数のImageとcanvas.imageにnilを入れて初期化しています。
saveメソッドは「UIImageWriteToSavedPhotosAlbum」を利用しています。
これを利用すると、「UIImageをphotoに保存する」ことができます。
これでも画像が保存できるのですが、saveボタンを押しても何も表示されません。
ですので、以下のコードを置き換えます。

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に変換し、画像としてカメラロールに保存する方法