CODEWITHSUNDEEP
iosswiftuiviewcashapelayer
duck1970
duck1970

Reputation: 137

CAShapeLayer Driving me bonkers

I'm trying to rotate a CAShapeLayer arounds its centre point. I'm really confused over bounds, frames, anchors and centre points.

I have created a circular CAShape within a UIView and want to rotate it around its centre. I have only included some of the code.

Function to Create the Circle I wish to rotate:

func drawCompassImage(){

    //Compass Bezel Ring
    let baseCirclePath = UIBezierPath()

    baseCirclePath.addArcWithCenter(CGPoint(x: CGFloat(self.frame.width/2), y: CGFloat(self.frame.width/2)), radius: CGFloat(baseCircleRadius), startAngle: CGFloat(-M_PI_2), endAngle:CGFloat(M_PI_2*3), clockwise: true)
    compassImage.path = baseCirclePath.CGPath
    compassImage.fillColor = UIColor.clearColor().CGColor;
    compassImage.strokeColor = UIColor.whiteColor().CGColor
    compassImage.lineDashPattern = [1.0,2.0]
    compassImage.lineWidth = 10.0
    self.layer.addSublayer(compassImage)

}

Function to create the red dot:

func drawCompassRedDot() {

    let compassBall = CAShapeLayer ()
    let compassBallPath = UIBezierPath ()
    let compassBallRadius :CGFloat = 5

    let xStart: Float  = Float(Float(baseCircleRadius) * cos(270 * Float(M_PI) / 180)) + Float(self.frame.width/2)
    let yStart: Float  = Float(Float(baseCircleRadius) * sin(270 * Float(M_PI) / 180)) + Float((self.frame.height/2)+0)
    compassBallPath.addArcWithCenter(CGPoint(x: CGFloat(xStart), y: CGFloat(yStart)), radius: compassBallRadius, startAngle: CGFloat(-M_PI_2), endAngle:CGFloat(M_PI_2*3), clockwise: true)
    compassBall.path = compassBallPath.CGPath
    compassBall.fillColor = UIColor.redColor().CGColor;
    compassBall.strokeColor = UIColor.redColor().CGColor
    compassBall.lineWidth = 1.0
    self.compassImage.addSublayer(compassBall)
}

Functions to rotate:

func animate(){

    compassImage.transform = CATransform3DMakeRotation(degree2radian(45), 0, 0, 1)

}

func degree2radian(a:CGFloat)->CGFloat {
    let b = CGFloat(M_PI) * a/180
    return b
}

My issue is whatever I try it always ends off-set:

enter image description here

The two circles should have the same centre.

Please help this is sending me bonkers...

Upvotes: 0

Views: 76

Answers (1)

duck1970
duck1970

Reputation: 137

I've worked it out. Need to add in the bounds and anchor point correctly:

compassImage.frame = bounds
compassImage.anchorPoint = CGPoint(x: 0.5, y: 0.5)

Therefore the code looks like this:

func drawCompassImage(){

    //Compass Bezel Ring
    let baseCirclePath = UIBezierPath()

    baseCirclePath.addArcWithCenter(CGPoint(x: CGFloat(self.frame.width/2), y: CGFloat(self.frame.width/2)), radius: CGFloat(baseCircleRadius), startAngle: CGFloat(-M_PI_2), endAngle:CGFloat(M_PI_2*3), clockwise: true)
    compassImage.path = baseCirclePath.CGPath
    compassImage.frame = bounds
    compassImage.anchorPoint = CGPoint(x: 0.5, y: 0.5)
    compassImage.fillColor = UIColor.clearColor().CGColor;
    compassImage.strokeColor = UIColor.whiteColor().CGColor
    compassImage.lineDashPattern = [1.0,2.0]
    compassImage.lineWidth = 10.0
    self.layer.addSublayer(compassImage)

}

Upvotes: 1

Related Questions