Creating horizontal dotted lines in ios

Question

I want to draw a straight dotted line and i tried the following code

    CGSize size = CGSizeMake(screenWidth, screenHeight);
    UIGraphicsBeginImageContext(size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
    CGContextSetFillColorWithColor(context, [[UIColor clearColor] CGColor]);    
    CGContextSetLineWidth(context, 5.0f);
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, screenWidth,screenHeight);
    CGContextStrokePath(context);

But this code shown like this

enter image description here

How can i get straight line.

Read the doc about: `CGContextAddLineToPoint()`. You'll understand your issue. You need to do `CGContextAddLineToPoint(context, 0,0);` — Larme, Mar 27 '14 at 12:01
Please show the code that resulted in the posted picture. How do you display the image? It looks like the rendered image is good, yet you present it using a distorted scaling. — Nikolai Ruhe, Mar 27 '14 at 12:15
Check the size of the `line` image view. It might not have the right aspect ratio and `contentMode`, so the image appears stretched or compressed. — Nikolai Ruhe, Mar 27 '14 at 12:31
OP already asked - duplicate of http://stackoverflow.com/questions/22686929/creating-horizontal-dotted-lines-in-ios — Chris Ballard, Apr 07 '14 at 13:53
Dotted line answer -> https://stackoverflow.com/a/48295270/7576100 — Jack, Jan 17 '18 at 06:58

Avt · Accepted Answer · 2014-03-27T12:31:25.817

You can use

void CGContextSetLineDash (
   CGContextRef c,
   CGFloat phase,
   const CGFloat lengths[],
   size_t count
);

Description

Sets the pattern for dashed lines in a graphics context.

So your code should be changed to

CGSize size = CGSizeMake(screenWidth, screenHeight);
UIGraphicsBeginImageContext(size);
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGContextSetFillColorWithColor(context, [[UIColor clearColor] CGColor]);    
CGContextSetLineWidth(context, 5.0f);

// Because your line width is 5 you need pattern 5 times “solid”, 5 times “empty”
CGFloat dash[2]={5 ,5};
CGContextSetLineDash(context,0,dash,2);

CGFloat y = 10;

CGContextMoveToPoint(context, 0, y);
CGContextAddLineToPoint(context, screenWidth, y);
CGContextStrokePath(context);

I have updated the answer. To modify vertical position of a line - change value in `CGFloat y = 10;` line. — Avt, Mar 27 '14 at 12:32

score 2 · Answer 2 · edited Mar 27 '14 at 12:29

you should use core graphics, this code will create a dotted line where you can set length of line and space

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        [shapeLayer setBounds:self.bounds];
        [shapeLayer setPosition:self.center];
        [shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
        [shapeLayer setStrokeColor:[[UIColor grayColor] CGColor]];
        [shapeLayer setLineWidth:1.0f];
        [shapeLayer setLineJoin:kCALineJoinRound];
        [shapeLayer setLineDashPattern:@[@5., @3.]];


        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, NULL, -15, 5);
        CGPathAddLineToPoint(path, NULL, 1030, 5);

        [shapeLayer setPath:path];
        CGPathRelease(path);

        [[self layer] addSublayer:shapeLayer];

score 0 · Answer 3 · answered Mar 27 '14 at 12:34

Your problem is probably not the rendered image but the way you present it. When setting the UIImage on a UIImageView make sure that they have equal proportions:

UIImageView *line; // your image view
UIImage *result;   // the rendered image

line.bounds = (CGRect){.size=result.size};

Creating horizontal dotted lines in ios

3 Answers3