ioscgcontextcgcontextrefcgcontextdrawpath

Draw dashed line in iOS


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.

enter image description here enter image description here


Solution

  • 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.