[swift]UIBezierPathを使った図形の描画

エンジニアの渡邉です。 前回のブログでUIBezierPathを使って円弧を描画したので、 その他の図形も描画…

エンジニアの渡邉です。

前回のブログでUIBezierPathを使って円弧を描画したので、
その他の図形も描画してみようと思います。
前回のブログはこちら⇨http://tokyo.supersoftware.co.jp/technology/7985

プロジェクトは前回のものをそのまま使用していきます。

■三角形の描画

        /* --- 三角形を描画 ---*/
        let triangleLayer = CAShapeLayer.init()
        let triangleFrame = CGRect.init(x: 180, y: 50, width: 100, height: 100)
        triangleLayer.frame = triangleFrame
        
        // 輪郭の色
        triangleLayer.strokeColor = UIColor.blue.cgColor
        // 三角形の中の色
        triangleLayer.fillColor = UIColor.clear.cgColor
        // 輪郭の太さ
        triangleLayer.lineWidth = 2.5
        
        // 三角形を描画
        let triangleLine = UIBezierPath()
        triangleLine.move(to: CGPoint.init(x: 0, y: triangleFrame.size.height))
        triangleLine.addLine(to: CGPoint.init(x: triangleFrame.size.width / 2, y: 0))
        triangleLine.addLine(to: CGPoint.init(x: triangleFrame.size.width, y: triangleFrame.size.height))
        triangleLine.close()
        
        // 三角形を描画
        triangleLayer.path = triangleLine.cgPath
        
        self.view.layer.addSublayer(triangleLayer)

■円の描画

        /* --- 円を描画 --- */
        let circleLayer = CAShapeLayer.init()
        let circleFrame = CGRect.init(x: 40, y: 180, width: 100, height: 100)
        circleLayer.frame = circleFrame
        
        // 輪郭の色
        circleLayer.strokeColor = UIColor.blue.cgColor
        // 円の中の色
        circleLayer.fillColor = UIColor.clear.cgColor
        // 輪郭の太さ
        circleLayer.lineWidth = 2.5
        
        // 円形を描画
        circleLayer.path = UIBezierPath.init(ovalIn: CGRect.init(x: 0, y: 0, width: circleFrame.size.width, height: circleFrame.size.height)).cgPath
        
        self.view.layer.addSublayer(circleLayer)

■楕円の描画

        /* --- 楕円を描画 --- */
        let ellipseLayer = CAShapeLayer.init()
        let ellipseFrame = CGRect.init(x: 180, y: 210, width: 100, height: 50)
        ellipseLayer.frame = ellipseFrame
        
        // 輪郭の色
        ellipseLayer.strokeColor = UIColor.blue.cgColor
        // 楕円の中の色
        ellipseLayer.fillColor = UIColor.clear.cgColor
        // 輪郭の太さ
        ellipseLayer.lineWidth = 2.5
        
        // 楕円を描画
        ellipseLayer.path = UIBezierPath.init(ovalIn: CGRect.init(x: 0, y: 0, width: ellipseFrame.size.width, height: ellipseFrame.size.height)).cgPath
        
        self.view.layer.addSublayer(ellipseLayer)

■四角形の描画

        /* --- 四角形を描画 --- */
        let rectangleLayer = CAShapeLayer.init()
        let rectangleFrame = CGRect.init(x: 40, y: 310, width: 100, height: 100)
        rectangleLayer.frame = rectangleFrame
        
        // 輪郭の色
        rectangleLayer.strokeColor = UIColor.blue.cgColor
        // 四角形の中の色
        rectangleLayer.fillColor = UIColor.clear.cgColor
        // 輪郭の太さ
        rectangleLayer.lineWidth = 2.5
        
        // 四角形を描画
        rectangleLayer.path = UIBezierPath.init(rect: CGRect.init(x: 0, y: 0, width: rectangleFrame.size.width, height: rectangleFrame.size.height)).cgPath
        
        self.view.layer.addSublayer(rectangleLayer)

■角丸四角形の描画

        /* --- 角丸四角形を描画 --- */
        let roundRectLayer = CAShapeLayer.init()
        let roundRectFrame = CGRect.init(x: 180, y: 310, width: 100, height: 100)
        roundRectLayer.frame = roundRectFrame
        
        // 輪郭の色
        roundRectLayer.strokeColor = UIColor.blue.cgColor
        // 角丸四角形の中の色
        roundRectLayer.fillColor = UIColor.clear.cgColor
        // 輪郭の太さ
        roundRectLayer.lineWidth = 2.5
        
        // 角丸四角形を描画
        roundRectLayer.path = UIBezierPath.init(roundedRect: CGRect.init(x: 0, y: 0, width: roundRectFrame.size.width, height: roundRectFrame.size.height), cornerRadius: 8).cgPath
        
        self.view.layer.addSublayer(roundRectLayer)

三角形を描画した時の方法を使えば色々な図形を書くことも可能です。
試しに星を描画してみました。

■星の描画

        /* --- 星を描画 --- */
        let starLayer = CAShapeLayer.init()
        let starFrame = CGRect.init(x: 40, y: 440, width: 100, height: 100)
        starLayer.frame = starFrame
        
        // 輪郭の色
        starLayer.strokeColor = UIColor.yellow.cgColor
        // 星の中の色
        starLayer.fillColor = UIColor.yellow.cgColor
        
        // 星を描画
        let starLine = UIBezierPath()
        starLine.move(to: CGPoint.init(x: 0, y: starFrame.size.height / 3))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width / 3, y: starFrame.size.height / 3))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width / 2, y: 0))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width * 2 / 3, y: starFrame.size.height / 3))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width, y: starFrame.size.height / 3))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width * 3 / 4, y: starFrame.size.height * 3 / 5))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width * 9 / 10 , y: starFrame.size.height * 9 / 10))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width / 2, y: starFrame.size.height * 3 / 4))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width / 10 , y: starFrame.size.height * 9 / 10))
        starLine.addLine(to: CGPoint.init(x: starFrame.size.width / 4, y: starFrame.size.height * 3 / 5))
        starLine.close()
        
        // 星を描画
        starLayer.path = starLine.cgPath
        
        self.view.layer.addSublayer(starLayer)

星など角が多くて複雑な図形は画像を使った方が良いかもしれませんが、
簡単な図形ならUIBezierPathを使用して描画してもいいですね。

最後にビルドして確認。

他にも点線なども描画できるので、色々な種類の図形が描画できそうです。