CODEWITHSUNDEEP
iosswiftcashapelayer
Adrian
Adrian

Reputation: 20058

How to change CAShapeLayer alpha/opacity value?

I can't seem to change the opacity of my CAShapeLayer whatever I do. I tried setting the opacity:

    bottomProgressBar.strokeColor = UIColor.white.cgColor
    bottomProgressBar.opacity = 0.1

Didn't work. Then I tried this:

bottomProgressBar.strokeColor = UIColor(displayP3Red: 255, green: 255, blue: 255, alpha: 0.1).cgColor

In both cases the alpha value is 1.
Is there another way to do this ? Or am I setting them wrong ?

edit:

Here is my code:
This is a class inheriting from UIView:

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

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

func configure() {
    bottomProgressBar.strokeColor = UIColor.white.cgColor
    bottomProgressBar.opacity = 0.1
    bottomProgressBar.lineWidth = self.frame.height
    bottomProgressBar.strokeStart = 0
    bottomProgressBar.strokeEnd = 1
    self.layer.addSublayer(bottomProgressBar)

    topProgressBar.strokeColor = UIColor.white.cgColor
    topProgressBar.lineWidth = self.frame.height
    topProgressBar.strokeStart = 0
    topProgressBar.strokeEnd = 1
    self.layer.addSublayer(topProgressBar)
}

edit 2:

override func layoutSubviews() {
    super.layoutSubviews()

    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: self.frame.width, y: 0))

    bottomProgressBar.path = path.cgPath
    topProgressBar.path = path.cgPath
}

edit 3:

enter image description here

Upvotes: 1

Views: 5860

Answers (2)

Lance Samaria
Lance Samaria

Reputation: 19572

Strange that it didn't work for you because .opacity is what changed the layer's alpha for me:

let circularPath = UIBezierPath(arcCenter: view.center,
                                          radius: (100,
                                          startAngle: -.pi/2,
                                          endAngle: 3 * .pi/2,
                                          clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = 6

shapeLayer.opacity = 0.3 // *** fades out the shape layer ***

Upvotes: 1

Brian
Brian

Reputation: 944

I think what's happening is that you have no path defined for the shape to be rendered.

    func configure() {
        let path = UIBezierPath(rect: CGRect(x: 0, y: 0, width: self.frame.width, height: self.frame.height))
        bottomProgressBar.frame = self.frame
        bottomProgressBar.bounds = self.bounds
        bottomProgressBar.path = path.cgPath
        bottomProgressBar.strokeColor = UIColor.red.cgColor
        bottomProgressBar.opacity = 0.1
//      no need for the following line as dimensions are already defined
//      bottomProgressBar.lineWidth = self.frame.height
//      bottomProgressBar.strokeStart = 0
//      bottomProgressBar.strokeEnd = 200
        self.layer.addSublayer(bottomProgressBar)

        // path width divided by 2 for demo
        let topPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: self.frame.width/2, height: self.frame.height))
        topProgressBar.frame = self.frame
        topProgressBar.bounds = self.bounds
        topProgressBar.path = topPath.cgPath
        topProgressBar.strokeColor = UIColor.green.cgColor
        self.layer.addSublayer(topProgressBar)
    }

Hope this helps.

Upvotes: 3

Related Questions