【Swift3】UIViewのdrawの中で線や文字や画像を描画する

UIViewのdrawメソッド中では線・文字・矩形など様々なものを描画できます。
今回はそれらの描画を試してみました。

検証用コードは下の通りです。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myView = MyView(frame: view.bounds)
        myView.backgroundColor = UIColor.white
        view.addSubview(myView)
    }
}

class MyView: UIView {
    override func draw(_ rect: CGRect) {
    }
}

線を引く

線の描画は以下の通りです。
線の太さや色を変える事ができます。

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 100, y: 100))
        path.addLine(to: CGPoint(x: 200, y: 200))
        path.lineWidth = 5.0 // 線の太さ
        UIColor.brown.setStroke() // 色をセット
        path.stroke()
    }
}

実行結果は以下の通りです。

addLineを追加すれば複雑な線も作る事ができます。

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 100, y: 100))
        path.addLine(to: CGPoint(x: 200, y: 200))
        path.addLine(to: CGPoint(x: 300, y: 100)) // 今回追加
        path.lineWidth = 5.0 // 線の太さ
        UIColor.brown.setStroke() // 色をセット
        path.stroke()
    }
}

曲線を描画する

addCurveメソッドを使う事でベジェ曲線を描画する事ができます。

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 100, y: 100))
        path.addCurve(to: CGPoint(x: 200, y: 200), controlPoint1: CGPoint(x: 150, y: 100), controlPoint2: CGPoint(x: 200, y: 150))
        path.lineWidth = 5.0 // 線の太さ
        UIColor.brown.setStroke() // 色をセット
        path.stroke()
    }
}

曲線の描画はaddArcでも行う事ができます。

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 100, y: 100))
        path.addArc(withCenter: CGPoint(x: 200, y: 100), radius: 100, startAngle: 180 * CGFloat.pi/180, endAngle: 90 * CGFloat.pi/180, clockwise: false)
        path.lineWidth = 5.0 // 線の太さ
        UIColor.brown.setStroke() // 色をセット
        path.stroke()
    }
}

四角形の描画

四角形の描画は以下のように行います。

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath(roundedRect: CGRect(x: 100, y: 100, width: 100, height: 100), cornerRadius: 10)
        UIColor.darkGray.setFill() // 色をセット
        path.fill()
    }
}

addLineを使って描画する事もできます。

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 100, y: 100))
        path.addLine(to: CGPoint(x: 200, y: 100))
        path.addLine(to: CGPoint(x: 200, y: 200))
        path.addLine(to: CGPoint(x: 100, y: 200))
        path.addLine(to: CGPoint(x: 100, y: 100))
        UIColor.darkGray.setFill() // 色をセット
        path.fill()
    }
}

文字の描画

文字の描画は以下のように行います。
第2引数でフォントや文字色の指定もできます。

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        "MyText".draw(at: CGPoint(x: 100, y: 100), withAttributes: [
            NSForegroundColorAttributeName : UIColor.blue,
            NSFontAttributeName : UIFont.systemFont(ofSize: 50),
            ])
    }
}

画像の描画

画像もテキスト同様にdrawメソッドを使います。

class MyView: UIView {
    override func draw(_ rect: CGRect) {
        UIImage(named: "sample")?.draw(at: CGPoint(x: 100, y: 100))
    }
}