ios - 使用 UIBezierPath 绘制像仪表一样的半圆形图像...!

Question

我的 View Controller 代码包含以下代码

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let width: CGFloat = 240
        let height: CGFloat = 240

        let demoView = DemoView(frame: CGRect(x: self.view.frame.size.width/2 - width/2,
                                              y: self.view.frame.size.height/2 - height/2,
                                              width: width,
                                              height: height))

        let subView = UIView.init(frame: (CGRect(x: demoView.frame.origin.x - width,
                                          y: demoView.frame.origin.y,
                                          width: width * 2,
                                          height: height * 2)))

        self.view.addSubview(demoView)
        self.view.addSubview(subView)

        subView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5)
        subView.layer.cornerRadius = subView.frame.size.height / 2
    }

}

import UIKit

class DemoView: UIView {
    var path: UIBezierPath!

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.darkGray
    }

    override func draw(_ rect: CGRect) {
        self.createTriangle()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    func createTriangle() {            
        let count : Int = 9
        let gap : CGFloat = 3
        let yValue : CGFloat = CGFloat(self.frame.size.width - ((CGFloat(count - 1)) * gap)) / CGFloat(count);

        for a in 0 ..< count {
            let i : CGFloat = CGFloat(a)

            let path1: UIBezierPath! = UIBezierPath()
            path1.move(to: CGPoint(x: 0.0, y: self.frame.size.height))
            path1.addLine(to: CGPoint(x: (yValue * i) > 0 ? (yValue * i) + i*gap : 0, y: (yValue * i) > 0 ? (yValue * i) + i*gap : 0))
            path1.addLine(to: CGPoint(x:yValue * (i+1) + i*gap, y: yValue * (i+1) + i*gap))
            path1.close()
            UIColor.orange.setFill()
            path1.fill()
        }
    }
}

谁能帮我实现这个目标？

编辑图像:

Answer 1

这是你想要的结果吗？

我的方法不是三角形而是弧形。在您的 DemoView 类中添加 createPie() 并在 draw(:) 中调用它而不是您的 createTriangle() .

这是我的代码:

func createPie() {
    // 2 vars to configure width of gap/banches
    var branchAmount = 10
    var gapAngle = CGFloat.pi / 100

    let startAngle = 3 * CGFloat.pi / 2
    let endAngle = 2 * CGFloat.pi
    let branchAngle = (endAngle - startAngle - (CGFloat(branchAmount) - 1) * gapAngle) / CGFloat(branchAmount)

    let paths = UIBezierPath()

    for i in 0..<branchAmount {
        paths.move(to: CGPoint(x: 0.0, y: self.frame.size.height))
        paths.addArc(withCenter: CGPoint(x: 0, y: self.frame.size.height),
                     radius: self.frame.size.height,
                     startAngle: startAngle + CGFloat(i) * (branchAngle + gapAngle),
                     endAngle: startAngle + CGFloat(i) * (branchAngle + gapAngle) + branchAngle,
                     clockwise: true)
    }
    paths.close()
    UIColor.orange.setFill()
    paths.fill()
}

干杯!

编辑:如果您想添加一个圆形蒙版，请将其添加到 createPie() 的末尾(现在不再是真正的馅饼了..):

    // Circular mask
    let maskLayer = CAShapeLayer()
    let maskPath = UIBezierPath(rect: bounds)
    maskLayer.fillRule = kCAFillRuleEvenOdd  // Circle will be substracted to the mask thanks to this
    maskPath.move(to: CGPoint(x: 0.0, y: frame.size.height))
    maskPath.addArc(withCenter: CGPoint(x: 0, y: frame.size.height), radius: maskRadius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
    maskLayer.path = maskPath.cgPath
    layer.mask = maskLayer

它只是添加由减去 bounds 和 原点圆(0，高度) 组成的掩码