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.

Could you describe the problem you see? Each picture has two sets of dashed lines and it isn't clear to me which you are referring to. Also, what about the dashed lines looks wrong? — Doug Richardson, Dec 17 '15 at 05:17
@DougRichardson You don't consider this is the problem? "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." — batuman, Dec 17 '15 at 05:30
I didn't say I don't consider it a problem, I just don't see what problem you're talking about. The only possible issue I see is that the steep, thick dashed lines have an extra thin line on the right side near the star, but you said the steep line looks fine so that can't be the issue you're talking about. I don't see anything wrong with the flat, thick lines, which is where you say the problem is. What exactly is the problem? — Doug Richardson, Dec 17 '15 at 05:40
OK, so just to be clear: the top image (the one with the steep, thick lines) is the one with the problem. And that problem is the final, thin line on the right hand side? If so, you should reword your question because in it you say "It is fine if the slope of the line is steep" but the problem is that it is NOT fine if the slope of the line is steep. — Doug Richardson, Dec 17 '15 at 05:44

score 0 · Accepted Answer · answered Dec 17 '15 at 17:40

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.

Draw dashed line in iOS

1 Answers1