Круговой путь Безье не в правильном пути - PullRequest
0 голосов
/ 29 октября 2018

Мне нужно нарисовать круговую диаграмму в виде. Я правильно нарисовал фоновую дорожку. Но когда я добавляю слои прогресса, пути прорисовываются неправильно.

Это код, который я использую для создания слоев и добавления их в представление.

Я также создал суть. Вы также можете увидеть полный код оттуда. MultiColoredPie Gist

private lazy var pathLayers: [PieLayer] = {

        guard let data = self.data else { return [] }

        var previousPercentage: CGFloat = 0
        let sorted = data.sorted(by: { (data1, data2) -> Bool in
            return data1.percentage < data2.percentage
        })

        var layers: [PieLayer] = []
        for (index, item) in sorted.enumerated() {
            previousPercentage += item.percentage
            let layer = PieLayer()
            layer.index = index
            layer.lineCap = CAShapeLayerLineCap.square
            layer.fillColor = nil
            layer.strokeColor = item.color.cgColor
            layer.strokeEnd = previousPercentage //item.percentage
            layer.percentage = previousPercentage //item.percentage
            layers.append(layer)
        }
        return layers
}()

override func layoutSubviews() {
        super.layoutSubviews()
        self.addShapes()
}

func addShapes() {
        shapeLayer.path = commonPath.cgPath
        shapeLayer.lineWidth = lineWidth
        self.layer.addSublayer(shapeLayer)

        for layer in pathLayers.reversed() {
            print("\(layer.index) - \(layer.percentage)")
            layer.lineWidth = lineWidth
            layer.path = commonPath.cgPath
            self.layer.addSublayer(layer)
        }

}

Я создаю путь с этим кодом,

private var commonPath: UIBezierPath {
        get {
            let x = self.frame.width/2
            let y = self.frame.height/2
            let center = CGPoint(x: x, y: y)
            let path = UIBezierPath(arcCenter: center, radius: CGFloat(x - lineWidth/2), startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true)
            path.close()
            return path
        }
}

Кто-нибудь знает, почему это происходит? (и, кажется, не начинается с -90)

enter image description here

enter image description here

1 Ответ

0 голосов
/ 29 октября 2018

Вы должны правильно установить CGLineCap. У вас есть CGLineCap.square, но вам нужно CGLineCap.butt

Вот больше информации об этом: CGLineCap

Изменить строку

 layer.lineCap = CAShapeLayerLineCap.square

до:

 layer.lineCap = CAShapeLayerLineCap.butt
...