使用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

我想说，这是因为你在bezier路径上设置了线宽，然后描边，然后你把它添加为形状层的路径，所以它被画了两次，而且是重叠的。

我刚才测试了一下，这个完全可以。

import UIKit

class ViewController: UIViewController {

    private let gridView: GridView = {
        $0.backgroundColor = UIColor.white
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(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)
    }
}