Tom
Tom

Reputation: 4033

Positioning of CAShapeLayer

I'm currently trying to implement a CAShapeLayer. It works fine, but its position isn't working the way I want it to.

I want the circle to be displayed inside of the top selected UIView you see in the second image below. To do that, I tried to set arcCenter to circleView.center. But what's being displayed is the image below.

How it's being displayed:
enter image description here

I want it to be displayed in the center inside of this UIView:
enter image description here

My code:

func displayCircle() {
        let color = UIColor(red: 11/255, green: 95/255, blue: 244/255, alpha: 1)
        let trackLayer = CAShapeLayer()
        let center = circleView.center
        let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)

        trackLayer.path = circularPath.cgPath
        trackLayer.strokeColor = UIColor.groupTableViewBackground.cgColor
        trackLayer.lineWidth = 20
        trackLayer.fillColor = UIColor.clear.cgColor

        shapeLayer.path = circularPath.cgPath
        shapeLayer.strokeColor = color.cgColor
        shapeLayer.lineWidth = 20
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineCap = CAShapeLayerLineCap.round
        shapeLayer.strokeEnd = 0

        circleView.layer.addSublayer(trackLayer)
        circleView.layer.addSublayer(shapeLayer)
    }

Edit, UIView's constraints:
enter image description here

Upvotes: 0

Views: 61

Answers (1)

Ahemadabbas Vagh
Ahemadabbas Vagh

Reputation: 494

You can simply change your center position of circle view like below,

let center = CGPoint(x: circleView.frame.size.width/2, y: circleView.frame.size.height/2)

Hope this way may help you.

Upvotes: 1

Related Questions