MILLEN BOX

音楽好きの組み込みソフトエンジニアによるプログラミング(主にiOSアプリ開発)の勉強の記録

Swiftでお絵描きアプリを作成する(第3回Redo/Undoの実装) [Array][swift2.2]

前回に引き続きお絵描きアプリを作成しようと思います。 作成するお絵描きアプリの機能は以下!

  • 拡大が可能!(前々回済み)
  • ペンの色、太さが変更可能!(前回済み)
  • Redo/Undoが可能!(今回)
  • 描いた絵の保存が可能!(次回以降)
     
    前々回はお絵描き部分の実装、前回はペンの色、太さの変更可能にしました。
    今回はRedo/Undoを可能にしたいと思います。
    前回、前々回をまだ読んでいないというあなたは以下もチェックしてみて下さい。

anthrgrnwrld.hatenablog.com

anthrgrnwrld.hatenablog.com

 
Githubは以下です。

▶︎GitHub - anthrgrnwrld/drawWithExpand at thirdBranch

f:id:anthrgrnwrld:20160720191801g:plain

続きを読む

Swiftでお絵描きアプリを作成する(第2回ペンの色・太さを変更可能にする) [UISlider][UIButton][UIBezierPath][swift2.2]

前回に引き続きお絵描きアプリを作成しようと思います。
作成するお絵描きアプリの機能は以下!

  • 拡大が可能!(前回済み)
  • ペンの色、太さが変更可能!(今回)
  • Redo/Undoが可能!(次回以降)
  • 描いた絵の保存が可能!(次回以降)

前回は拡大可能なお絵描き部分を作成しました。
今回はお絵描きを行う際にペンの色、太さを変更出来るようにしようと思います。
前回をまだ読んでいないというあなたは以下もチェックしてみて下さい。

anthrgrnwrld.hatenablog.com  
Githubは以下です。
 
GitHub - anthrgrnwrld/drawWithExpand at secondBranch

 
f:id:anthrgrnwrld:20160717153920g:plain

続きを読む

Swiftでお絵描きアプリを作成する(第1回お絵描きの実装) [UIScrollView][UIGestureRecognizer][UIBezierPath][swift2.2]

現在作成中のアプリでお絵描き部分の実装しておりまして、その記録を記事として残しておこうと思います。
計3回くらいでまとめようと思っています。
少し高機能な部分はこんな感じ!

  • 拡大が可能!
  • ペンの色、太さが変更可能!(次回以降)
  • Redo/Undoが可能!(次回以降)
  • 描いた絵の保存が可能!(次回以降)
     

Githubは以下です。今回はお絵描き部分のみとしています。下記の解説と合わせてご確認下さい。

▶︎GitHub - anthrgrnwrld/drawWithExpand at firstBranch

f:id:anthrgrnwrld:20160714230449g:plain

(続き書きました!)
anthrgrnwrld.hatenablog.com

anthrgrnwrld.hatenablog.com

続きを読む

UIImageを塗りつぶしてみよう [UIImage]

ふとUIImageを塗りつぶしたいと思ったのですがちょっと詰まった為、以下にメモを残しておきます。

以下の記事をがっつり参考にしました。

qiita.com

ソースを以下に貼っておきます。

func fillColorWithUIImage(image: UIImage) -> UIImage {
        let imageSize = CGSizeMake(image.size.width, image.size.height)               //サイズの決定
        let imageRect = CGRectMake(0, 0, imageSize.width, imageSize.height)         //キャンバスのRectの決定
        UIGraphicsBeginImageContextWithOptions(imageSize, false, 0.0)               //コンテキスト作成(キャンバスのUIImageを作成する為)
        UIColor.whiteColor().setFill()                                              //白色塗りつぶし作業1
        UIRectFill(imageRect)                                                       //白色塗りつぶし作業2
        image.drawInRect(imageRect)                                                 //内容を描く(真っ白)
        let retImage = UIGraphicsGetImageFromCurrentImageContext()                  //何も描かれてないUIImageを取得
        UIGraphicsEndImageContext()                                                 //コンテキストを閉じる
        return retImage                                                             //塗りつぶしUIImageを返す
}

以上です。

意外と知らない!?UIImageViewを削除する方法 [UIImageView]

UIImageViewを削除する方法...ってどうやるんだっけ?ということがあったのでメモしておきます。

どこかで以下のようにインスタンス化しているUIImageView。

let imageView = UIImageView(image: uiImage)

removeFromSuperviewを使用することで削除できます。

imageView.removeFromSuperview()

本日は以上。

extensionを使ってみる [swift2.2]

前回、タップした瞬間に円を描くサンプルを作成しました。
▶︎ swiftで円を描く [UIGestureRecognizer] [drawInRect] [Context] [swift 2.2] - MILLEN BOX

それを見た方から「extensionを使うといいよ〜」とアドバイス頂きましたのでやってみました。
今回はその方法のメモ。

Githubは以下です。

▶︎GitHub - anthrgrnwrld/oekakiGestureRecognizer at branch

あくまでextensionの使い方のメモですので、「変数をこうした方がいいぜ!」という部分はたくさん含まれていると思われます。

ソースをベタっと貼っときます

extensionUIImage.swift

import UIKit

extension UIImage {
    
    func drawCircle(size: CGSize, center: CGPoint) -> UIImage {
        
        let radius: CGFloat = 20.0                                          //Drawする円の半径
        let red: CGFloat = 1.0                                              //Drawする色 R
        let blue: CGFloat = 0.0                                             //Drawする色 B
        let green: CGFloat = 0.0                                            //Drawする色 G
        let alpha: CGFloat = 1.0                                            //Drawする色 Alpha
        
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)            //コンテキストを取得
        
        //タップした時に描く円のRect
        let circleRect = CGRectMake(center.x - radius, center.y - radius, radius * 2, radius * 2)
        
        
        self.drawInRect(CGRectMake(0, 0, size.width, size.height))          //コンテキストにimageViewの内容を写す
        let circlePath = UIBezierPath(ovalInRect: circleRect)               //円を描く
        let color = UIColor(red:red, green:green, blue:blue, alpha:alpha)   //透明色を格納
        color.setFill()
        circlePath.fill()
        let retImage = UIGraphicsGetImageFromCurrentImageContext()          //UIImageを取得する
        UIGraphicsEndImageContext()                                         //コンテキストを閉じる
        
        return retImage                                                     //UIImageをReturnする
        
    }
    
}

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let myOekaki = OekakiGestureRecognizer(target: self, action: #selector(ViewController.drawGesture(_:)))
        self.view.addGestureRecognizer(myOekaki)
        
        
        let size = self.imageView.frame.size                                //コンテキストのサイズ
        
        //(extension対策)self.imageView.imageに所期画像を追加しておく
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        self.imageView.image?.drawInRect(CGRectMake(0, 0, size.width, size.height))
        self.imageView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
    
    internal func drawGesture(sender: AnyObject) {
        
        guard let oekakiGesture = sender as? OekakiGestureRecognizer else {
            print("Oekaki Gesture Error happened.")
            return
        }
        
        switch oekakiGesture.state {
            
        case .Began:
            
            let size = self.imageView.frame.size                                //コンテキストのサイズ
            let touchPoint = oekakiGesture.locationInView(self.imageView)       //タッチ座標を取得
            
            //Drawを実行 -> 結果をUIImageにて取得
            //let imageAfterDraw = drawCircle(self.imageView.image, size: size, center: touchPoint)
            let imageAfterDraw = self.imageView.image?.drawCircle(size, center: touchPoint)
            self.imageView.image = imageAfterDraw
            
        default:
            break
            
        }
        
    }



}

次はprotocolのサンプルを作ってみようと思う今日この頃です。

swiftで円を描く [UIGestureRecognizer] [drawInRect] [Context] [swift 2.2]

画像イメージを貼り付け表示とかではなく、swiftで円を描く方法のメモです。
今回は前回作成した OekakiGestureRecognizer を使ってタップした瞬間に円を描くサンプルを作成しました。

参考URL: OekakiGestureRecognizer (touchDownを認識するGestureRecognizer) [UIGestureRecognizer] - MILLEN BOX

Githubは以下です。

▶︎GitHub - anthrgrnwrld/oekakiGestureRecognizer

ソースをベタっと貼り付けときます

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let myOekaki = OekakiGestureRecognizer(target: self, action: #selector(ViewController.drawGesture(_:)))
        self.view.addGestureRecognizer(myOekaki)
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
    
    internal func drawGesture(sender: AnyObject) {
        
        guard let oekakiGesture = sender as? OekakiGestureRecognizer else {
            print("Oekaki Gesture Error happened.")
            return
        }
        
        switch oekakiGesture.state {
            
        case .Began:
            
            let size = self.imageView.frame.size                                //コンテキストのサイズ
            let touchPoint = oekakiGesture.locationInView(self.imageView)       //タッチ座標を取得
            
            //Drawを実行 -> 結果をUIImageにて取得
            let imageAfterDraw = drawCircle(self.imageView.image, size: size, center: touchPoint)
            self.imageView.image = imageAfterDraw
            
        default:
            break
            
        }
    
    }
    
    func drawCircle(canvas: UIImage?, size: CGSize, center: CGPoint) -> UIImage {
        
        let radius: CGFloat = 20.0                                          //Drawする円の半径
        let red: CGFloat = 1.0                                              //Drawする色 R
        let blue: CGFloat = 0.0                                             //Drawする色 B
        let green: CGFloat = 0.0                                            //Drawする色 G
        let alpha: CGFloat = 1.0                                            //Drawする色 Alpha
        
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)            //コンテキストを取得
        
        //タップした時に描く円のRect
        let circleRect = CGRectMake(center.x - radius, center.y - radius, radius * 2, radius * 2)
        

        canvas?.drawInRect(CGRectMake(0, 0, size.width, size.height))        //コンテキストにimageViewの内容を写す
        let circlePath = UIBezierPath(ovalInRect: circleRect)               //円を描く
        let color = UIColor(red:red, green:green, blue:blue, alpha:alpha)   //透明色を格納
        color.setFill()
        circlePath.fill()
        let retImage = UIGraphicsGetImageFromCurrentImageContext()          //UIImageを取得する
        UIGraphicsEndImageContext()                                         //コンテキストを閉じる
        
        return retImage                                                     //UIImageをReturnする
        
    }


}

こんな風に北斗七星が書けるよ!
f:id:anthrgrnwrld:20160701192840p:plain

ふとした時に役に立つかもです。