在按钮周围添加CAShapeLayer

时间:2017-12-26 06:18:53

标签: ios swift

我创建了一个圆圈形状的CAShapeLayer,我想将它添加到我在视图中的按钮周围。由于动画的目的,我这样做而不是边框​​。我不希望按钮周围有边框,我宁愿有一个形状。这是我添加它的方式,但由于某种原因,它不是直接在按钮周围添加形状。

这是我添加图层的代码

recordLine = CAShapeLayer()
let circularPath = UIBezierPath(arcCenter: recordButton.center, radius: recordButton.frame.width / 2, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
recordLine.path = circularPath.cgPath
recordLine.strokeColor = UIColor.white.cgColor
recordLine.fillColor = UIColor.clear.cgColor
recordLine.lineWidth = 5
view.layer.addSublayer(recordLine)

这就是出于某种原因添加该行的方式。Actual position of the layer

3 个答案:

答案 0 :(得分:2)

这种情况正在发生,因为您在正确渲染自动布局约束之前添加了Shape图层。

请在添加形状图层前添加一行:self.view.layoutIfNeeded()

 @IBOutlet weak var roundButton: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        roundButton.layer.cornerRadius = 50.0
        roundButton.clipsToBounds = true
        roundButton.alpha = 0.5
        self.view.layoutIfNeeded()

        let recordLine = CAShapeLayer()
        let circularPath = UIBezierPath(arcCenter: roundButton.center, radius: roundButton.frame.width / 2, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: false)
        recordLine.path = circularPath.cgPath
        recordLine.strokeColor = UIColor.black.cgColor
        recordLine.fillColor = UIColor.clear.cgColor
        recordLine.lineWidth = 10
        view.layer.addSublayer(recordLine)

    }

请检查参考图片enter image description here 这对我有用。

答案 1 :(得分:0)

//尝试这样我希望它对你有用。 注意:颜色和其他属性会根据您的要求而变化

let shapeLayer = CAShapeLayer()
    shapeLayer.backgroundColor = UIColor.clear.cgColor
    shapeLayer.name = "Star"
    let path: CGPath = UIBezierPath(arcCenter: recordButton.center, radius: recordButton.frame.width / 2, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
    shapeLayer.path = path
    shapeLayer.lineWidth = 5.0
    self.layer.mask = shapeLayer

答案 2 :(得分:0)

我的按钮是程序化的。我必须在cashapelayer

中添加viewDidLayoutSubviews
lazy var cameraButton: UIButton = {
    let button = UIButton(type: .system)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.backgroundColor = UIColor.lightGray
    return button
}()

var wasCAShapeLayerAddedToCameraButton = false

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    if !wasCAShapeLayerAddedToCameraButton {
        wasCAShapeLayerAddedToCameraButton = true
        
        cameraButton.layer.cornerRadius = cameraButton.frame.width / 2
        
        addCAShapeLayerToCameraButton()
    }
}

func addCAShapeLayerToCameraButton() {
    
    let circularPath = UIBezierPath(arcCenter: cameraButton.center,
                                    radius: (cameraButton.frame.width / 2),
                                    startAngle: 0,
                                    endAngle: 2 * .pi,
                                    clockwise: true)
    shapeLayer.path = circularPath.cgPath
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = 10
    view.layer.addSublayer(shapeLayer)
}