我正在尝试使用 CAShapeLayer 绘制圆形按钮并为其设置动画，但只是绘图让我很头疼 - 我似乎无法弄清楚如何将数据传递到我的类中。

这是我的设置:
- 一个 UIView 类型的类，它将绘制 CAShapeLayer
- View 在我的 View Controller 中呈现并使用自动布局约束构建

我曾尝试使用 layoutIfNeeded 但似乎传递数据为时已晚，无法绘制 View 。我也试过在 vieWillLayoutSubviews() 中重绘 View ，但没有。下面的示例代码。我究竟做错了什么？

我是否过早/过晚传递数据？
我绘制 bezierPath 是否为时已晚？

我非常感谢指针。

也许还有第二个后续问题:是否有更简单的方法来绘制绑定(bind)到其 View 大小的圆形路径？

在我的 View Controller 中:

import UIKit

class ViewController: UIViewController {

    let buttonView: CircleButton = {
        let view = CircleButton()
        view.backgroundColor = .black
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    override func viewWillLayoutSubviews() {
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(buttonView)
        buttonView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        buttonView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        buttonView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.75).isActive = true
        buttonView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.25).isActive = true
        buttonView.layoutIfNeeded()
        buttonView.arcCenter = buttonView.center
        buttonView.radius = buttonView.frame.width/2
    }

    override func viewDidAppear(_ animated: Bool) {
        print(buttonView.arcCenter)
        print(buttonView.radius)
    }
}

class CircleButton: UIView {

    //Casting outer circular layers
    let trackLayer = CAShapeLayer()
    var arcCenter = CGPoint()
    var radius = CGFloat()


    //UIView Init
    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    //UIView post init
    override func layoutSubviews() {
        super.layoutSubviews()

        print("StudyButtonView arcCenter \(arcCenter)")
        print("StudyButtonView radius \(radius)")

        layer.addSublayer(trackLayer)
        let outerCircularPath = UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: 0, endAngle: 2*CGFloat.pi, clockwise: true)
        trackLayer.path = outerCircularPath.cgPath
        trackLayer.strokeColor = UIColor.lightGray.cgColor
        trackLayer.lineWidth = 5
        trackLayer.strokeStart = 0
        trackLayer.strokeEnd = 1
        trackLayer.fillColor = UIColor.clear.cgColor
        trackLayer.transform = CATransform3DMakeRotation(-CGFloat.pi/2, 0, 0, 1)
    }


    //Required for subclass
    required init?(coder aDecoder: NSCoder) {
        fatalError("has not been implemented")
    }
}

最佳答案

自动布局与您的 CircleButton 的正确实现之间确实没有任何关联。类(class)。您的 CircleButton class 不知道也不关心它是通过自动布局配置的还是具有固定大小。

您的自动布局代码看起来不错(除了下面的第 5 点和第 6 点)。您的代码片段中的大部分问题都在您的 CircleButton 中。类(class)。几个观察:

buttonView.arcCenter = buttonView.center

@IBDesignable
class CircleButton: UIView {

    private let trackLayer = CAShapeLayer()

    @IBInspectable var lineWidth:   CGFloat = 5          { didSet { updatePath() } }
    @IBInspectable var fillColor:   UIColor = .clear     { didSet { trackLayer.fillColor   = fillColor.cgColor } }
    @IBInspectable var strokeColor: UIColor = .lightGray { didSet { trackLayer.strokeColor = strokeColor.cgColor  } }
    @IBInspectable var strokeStart: CGFloat = 0          { didSet { trackLayer.strokeStart = strokeStart } }
    @IBInspectable var strokeEnd:   CGFloat = 1          { didSet { trackLayer.strokeEnd   = strokeEnd } }

    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }

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

    private func configure() {
        trackLayer.fillColor   = fillColor.cgColor
        trackLayer.strokeColor = strokeColor.cgColor
        trackLayer.strokeStart = strokeStart
        trackLayer.strokeEnd   = strokeEnd

        layer.addSublayer(trackLayer)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        updatePath()
    }

    private func updatePath() {
        let arcCenter = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = (min(bounds.width, bounds.height) - lineWidth) / 2
        trackLayer.lineWidth = lineWidth
        trackLayer.path = UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true).cgPath

        // There's no need to rotate it if you're drawing a complete circle.
        // But if you're going to transform, set the `frame`, too.

        trackLayer.transform = CATransform3DIdentity
        trackLayer.frame = bounds
        trackLayer.transform = CATransform3DMakeRotation(-.pi / 2, 0, 0, 1)
    }
}

关于swift - 使用自动布局绘制 CAShapeLayer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47879790/