Draw a circle around the image

I want a border on my image image. I also want only a certain percentage of the border to be filled depending on how much of the profile information is complete.

If username, email, gender, school and address is required and if the user only provides 3 of the above fields, I want the circular border to be 60% full and similar.

My code looks like this, however it only displays a 100% filled circle and I have no control over what percentage of the circle I assume should be colored. How can I solve this? The following figure shows what I want to achieve.

Picture

enter image description here

code

self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width / 2;
self.profileImageView.layer.borderColor = [UIColor whiteColor].CGColor;
self.profileImageView.clipsToBounds = YES;

      

+3


source to share


2 answers


You're having trouble saying that cornerRadius

- it's just a lazy way out. You need to look into the arc drawing yourself.



For this, there are different levels of laziness. The easiest way is to paint it on a layer in front of the image. And even then, you have a choice: you can draw it using Quartz's draw calls, or you can ask the CAShapeLayer to draw it for you. One nice thing about the CAShapeLayer is that you can easily animate the arc growth (by changing strokeEnd

).

+2


source


Simply, if you want to get the answer with code, this is it.



UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 400) radius:20.f startAngle:-M_PI_2 endAngle:0 clockwise:NO];

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setStrokeColor:[UIColor blueColor].CGColor];
[shapeLayer setFillColor:[UIColor clearColor].CGColor];
[shapeLayer setLineWidth:5.f];
[shapeLayer setPath:circlePath.CGPath];
[self.view.layer addSublayer:shapeLayer];

      

+4


source







All Articles