CODEWITHSUNDEEP
iosobjective-ccore-graphicscgcontext
Zeezer
Zeezer

Reputation: 1533

Objective C iOS drawing rectangles on an arc

I need to draw a custom arc in an iOS application. The picture demonstrate how I want to draw the arc, using small rectangles. I have tried to use CGContextAddArc which draws a line, but I cant understand how to use objects(rectangle) and not just a straight line. Is this even possible or should I choose another approach?

Here is the arc i want to draw:

Upvotes: 1

Views: 701

Answers (2)

jrturton
jrturton

Reputation: 119242

Rather than try to draw each element individually, try drawing a single arc with a large width and a dash pattern. For example, a line width of 10.0 and a dash pattern of 1,10 will draw an effect very similar to the one you are trying to achieve - a series of 1x10 rectangles, placed 10 points apart, on the path you specify.

The relevant CGContext functions are CGContextSetLineWidth and CGContextSetLineDash.

Upvotes: 3

Tirth
Tirth

Reputation: 7789

I draw this kind of thing using UIBenizerCurve from QuartzCore framework. I do something demo code as following,

in class .h file 

struct angleRanges{
    float startRange;
    float endRange;
}angle_Range;

Provide your ranges of angle. And in .m file

#import <tgmath.h>
#import <QuartzCore/QuartzCore.h>
#define RADIUS 125.0f
#define METER_END_LIMIT 100.f
#define CIRCLE_STROKE_PATH_WIDTH 30.f
#define ANGAL -90.f

NSInteger numberOfParts = METER_END_LIMIT/5;
    float angleRange = 0;

for(int loopIndex = 0; loopIndex <= numberOfParts; loopIndex++){
    angle_Range.startRange = 0;
    angle_Range.endRange   = 360 - (180.f * angleRange)/METER_END_LIMIT;
    double actualLineAngle = angle_Range.endRange - angle_Range.startRange;

    float startAngle = actualLineAngle - 0.5;
    float endAngle = actualLineAngle + 0.5;

    startAngle =  DEGREES_TO_RADIANS(startAngle);
    endAngle = DEGREES_TO_RADIANS(endAngle);
    UIBezierPath *aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x, self.center.y + RADIUS/2)
                                                         radius:(RADIUS+CIRCLE_STROKE_PATH_WIDTH/3)
                                                     startAngle:startAngle
                                                       endAngle:endAngle
                                                      clockwise:YES];

    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    [shapeLayer setFrame: self.frame];
    [shapeLayer setPath: [aPath CGPath]];
    shapeLayer.lineWidth = 5;
    [shapeLayer setStrokeColor:[[UIColor grayColor] CGColor]];
    [shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
    [shapeLayer setMasksToBounds:YES];
    [self.layer addSublayer:shapeLayer];
    [aPath closePath];

    angleRange = angleRange + 5.0f;
}

Upvotes: 1

Related Questions