使用 UIBezierPath 通过 for 循环添加多条线时，线的粗细不统一？

Question

我使用 swift 5 创建了小型 ios 项目并创建了小型 UIView，我需要在 UIView 中添加垂直线。我在 for 循环的一侧创建了 UIBezierPath 并重复了该行。线条已根据给定的 x、y 坐标正确绘制，但我可以看出线条的粗细已经改变，其中一些是粗体，一些是模糊的（细的）。如果有人知道这里发生了什么，请帮助我解决它，非常感谢您的反馈。请参考我的代码和图片，例如

代码：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let testView = UIView(frame: CGRect(x:0, y: 0, width: 300, height: 500))
        testView.backgroundColor = UIColor.blue
        self.view.addSubview(testView)

        testView.translatesAutoresizingMaskIntoConstraints = false
        let guide = self.view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            testView.topAnchor.constraint(equalTo: guide.topAnchor, constant: 300),
            testView.leftAnchor.constraint(equalTo: guide.leftAnchor, constant: 300),
            testView.widthAnchor.constraint(equalToConstant: 300),
            testView.heightAnchor.constraint(equalToConstant: 500)
        ])

        let lineDistance:Int = 20
        let lineColor:UIColor = UIColor.white
        let gridPath = UIBezierPath()
        gridPath.lineWidth = 2

        var count = 0
        for x in 0..<Int(testView.bounds.size.width) {
            if x % lineDistance == 0 {
                count += 1
                gridPath.move(to: CGPoint(x: CGFloat(x), y: 0))
                gridPath.addLine(to: CGPoint(x: CGFloat(x), y: testView.bounds.size.height))
            }
        }
        print("no of execution \(count)")

        //        for y in 0..<Int(testView.bounds.size.height) {
        //            if y % lineDistance == 0 {
        //                gridPath.move(to: CGPoint(x:0, y: CGFloat(y)))
        //                gridPath.addLine(to: CGPoint(x: testView.bounds.size.width, y: CGFloat(y)))
        //            }
        //        }
        gridPath.close()
        let layer = CAShapeLayer()
        layer.path = gridPath.cgPath
        gridPath.stroke()
        layer.strokeColor = lineColor.cgColor

        testView.layer.insertSublayer(layer, at: 0)
    }


}

图片：

Answer 1

我会说这是因为你在贝塞尔路径上设置了线宽，然后对其进行描边，然后将其添加为形状图层的路径，所以它被绘制了两次并且重叠了。

我刚刚测试过，效果非常好：

import UIKit

class ViewController: UIViewController {

    private let gridView: GridView = {
        [=10=].backgroundColor = UIColor.white
        [=10=].translatesAutoresizingMaskIntoConstraints = false
        return [=10=]
    }(GridView(lineDistance: 20, lineWidth: 3, lineColor: .black))

    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }

    private func setup() {
        setupViews()
        setupConstraints()
    }

    private func setupViews() {
        view.addSubview(gridView)
    }

    private func setupConstraints() {
        NSLayoutConstraint.activate([
             gridView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
             gridView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
             gridView.widthAnchor.constraint(equalToConstant: 300),
             gridView.heightAnchor.constraint(equalToConstant: 500)
         ])
    }
}

class GridView: UIView {

    let lineDistance: Int
    let lineWidth: CGFloat
    let lineColor: UIColor

    init(lineDistance: Int, lineWidth: CGFloat, lineColor: UIColor) {
        self.lineDistance = lineDistance
        self.lineWidth = lineWidth
        self.lineColor = lineColor
        super.init(frame: .zero)
    }

    required init?(coder: NSCoder) {
        fatalError()
    }

    override func draw(_ rect: CGRect) {
        drawGrid(rect)
    }

    private func drawGrid(_ rect: CGRect) {
        let linePath = UIBezierPath()
        for x in 0..<Int(rect.size.width) {
            if x % lineDistance == 0 {
                let topPoint =  CGPoint(x: CGFloat(x), y: 0)
                let bottomPoint = CGPoint(x: CGFloat(x), y: rect.size.height)
                linePath.move(to: topPoint)
                linePath.addLine(to: bottomPoint)
            }
        }
        let lineLayer = CAShapeLayer()
        lineLayer.path = gridPath.cgPath
        lineLayer.lineWidth = lineWidth
        lineLayer.strokeColor = lineColor.cgColor
        layer.addSublayer(lineLayer)
    }
}

使用 UIBezierPath 通过 for 循环添加多条线时，线的粗细不统一？

When adding the multiple lines via for loop using UIBezierPath , Thickness of lines are not Unified?

ios

uibezierpath

swift5