ブログ一覧に戻る

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

IOSSwiftXcode

みなさんこんにちは!
イザナギです!


//ベジェ曲線の利用
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に変換し、画像としてカメラロールに保存する方法

関連記事

この記事に関連するおすすめです。