Draw dashed line in iOS

Question

I used CGContext to draw dashed lines in iOS. My code is as follow.

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGFloat dashes[] = {5,5};
CGContextSetLineDash(context, 0, dashes, 2);
float startx = x_percentileValues[0];
float starty = orgy-numskipPixels_v*(3-minWeight);
for(int i=0; i<[MeasuredInfos.retval count]; i++) {
     float x = numskipPixels_h*hoursBetweenDates*3+orgx;
     float y = orgy-([[MeasuredInfos.retval objectAtIndex: i] getWeight] - minWeight)*numskipPixels_v;
     CGContextMoveToPoint(context, startx, starty);
     CGContextAddLineToPoint(context, x, y);
     CGContextStrokePath(context);
     startx = x;
     starty = y;


}

It is fine if the slope of the line is steep. If not steep, the dashed line has problem as shown in the attached pictures.

I checked in this link, nothing much discussion for the CGContextSetLineDash.

Answer 1

I found the problem. The problem is that I used two CGContextRef in two separate functions. One is in

       - (void)drawRect:(CGRect)rect {
        //Get the CGContext from this view
            CGContextRef context = UIGraphicsGetCurrentContext();

            //Set the stroke (pen) color
            CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
            //Set the width of the pen mark
            CGContextSetLineWidth(context, 2.0);
            float startx = x_percentileValues[0];
            float starty = orgy-numskipPixels_v*(3-minWeight);
            for(int i=0; i<[MeasuredInfos.retval count]; i++) {
                 float x = numskipPixels_h*hoursBetweenDates*3+orgx;
                 float y = orgy-([[MeasuredInfos.retval objectAtIndex: i] getWeight] - minWeight)*numskipPixels_v;
                 CGContextMoveToPoint(context, startx, starty);
                 CGContextAddLineToPoint(context, x, y);
                 CGContextStrokePath(context);
                 startx = x;
                 starty = y;

                 [self drawStar_atX:x andatY:y];
            }

        }

Another one in drawStar_atX

-(void)drawStar_atX:(float)xCenter andatY:(float)yCenter
{
    int aSize = 5.0;
    CGFloat color[4] = { 1.0, 0.0, 0.0, 1.0 }; // Red
    CGColorRef aColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), color);
    CGContextRef context1 = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context1, aSize);

    float  w = 15.0;
    double r = w / 2.0;
    float flip = -1.0;

    CGContextSetFillColorWithColor(context1, aColor);


    CGContextSetStrokeColorWithColor(context1, aColor);

    double theta = 2.0 * M_PI * (2.0 / 5.0); // 144 degrees

    CGContextMoveToPoint(context1, xCenter, r*flip+yCenter);

    for (NSUInteger k=1; k<5; k++)
    {
        float x = r * sin(k * theta);
        float y = r * cos(k * theta);
        CGContextAddLineToPoint(context1, x+xCenter, y*flip+yCenter);
    }

    CGContextClosePath(context1);
    CGContextFillPath(context1);
    return;
}

I called drawStar_atX from drawRect. context and context1 in two functions have some problems and start from the second segment the dashed line's width becomes bigger. Actually they are declared in different functions with different widths, shouldn't have any relationship. Now I solved the problem as context and context1 has same width. Still learning why they have some relations.