How to draw polygons with CGPath?

Question

I have been reading thru the documentation however it is not immediatly clear to me how to draw a polygon using CGPath. All I need to do is to draw CGPath around something like this:

__
\  \ 
 \  \
  \__\

Could anyone please provide an snippet on how to do this?

Additionally I assume CGPathContainsPoint will help me determine if a point is inside such path?, or does the path have to be a solid drawing

Also how can i move the cgpath around? Is this as easy as changing something like the origin just like in cgrect?

Thank you.

-Oscar

score 20 · Answer 1 · answered Aug 12 '14 at 12:41

This is an example of how to create a triangle using CGPath, you only have to put the points.

var path = CGPathCreateMutable()
CGPathMoveToPoint(path, nil, 0, 0) //start from here
CGPathAddLineToPoint(path, nil, 20, 44) 
CGPathAddLineToPoint(path, nil, 40, 0) 
CGPathAddLineToPoint(path, nil, 0, 0)

//and to use in SpriteKit, for example

var tri = SKShapeNode(path: path) 
var color = NSColor.blueColor()
tri.strokeColor = color
tri.fillColor = color

This is the result

Triangle with CGPath

score 14 · Accepted Answer · edited Jul 14 '15 at 15:35

14

You should do it like this:

- (void)drawRect:(CGRect)rect { 

        CGContextRef context = UIGraphicsGetCurrentContext(); 

        CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
        CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);

        // Draw them with a 2.0 stroke width so they are a bit more visible.
        CGContextSetLineWidth(context, 2.0);

        for(int idx = 0; idx < self.points.count; idx++)
        {

            point = [self.points objectAtIndex:idx];//Edited 
            if(idx == 0)
            {
                // move to the first point
                CGContextMoveToPoint(context, point.x, point.y);
            }
            else
            {
                CGContextAddLineToPoint(context, point.x, point.y);
            }
        }

        CGContextStrokePath(context);
}

Note here, the points is the array of points you want to draw the polygon for. So it should be circular path like: You are drawing a triangle of points (x1, x2, x3) then you should pass into array (x1, x2, x3, x1).

Hope this helps.

edited Jul 14 '15 at 15:35

Iulian Onofrei

9,188
10
67
113

answered Feb 12 '10 at 05:13

Madhup Singh Yadav

8,110
7
51
84

You don't reference an array here, you just add the same point repeatedly. – David Kanarek Feb 12 '10 at 05:48
1

@David I thought this was understood – Madhup Singh Yadav Feb 12 '10 at 11:00
3

He could've understood it, but I think it's usually best to post correct code or explicitly state that the code contains errors/omissions. When teaching a new concept, what's obvious to the teacher may be complex and hard to see for the student. – David Kanarek Feb 12 '10 at 16:22
1

@David: Ok I will keep in mind this thing next time, while posting an answer. – Madhup Singh Yadav Feb 13 '10 at 04:52
This approach won't join the first and last lines together to make a polygon as requested, will it? (If you set the line to be very thick this is very visible.) – Nestor Mar 13 '12 at 21:49

score 13 · Answer 3 · answered May 14 '18 at 10:54

Draelach's answer updated to Swift 4:

let path = CGMutablePath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 20, y: 44))
path.addLine(to: CGPoint(x: 40, y: 0))
path.addLine(to: CGPoint(x: 0, y: 0))

let tri = SKShapeNode(path: path)

score 5 · Answer 4 · edited Sep 10 '11 at 22:26

5

See Apple's QuartzDemo application. It has code for doing this, as well as many other Quartz drawing functions.

edited Sep 10 '11 at 22:26

user160917

9,211
4
53
63

answered Feb 12 '10 at 14:03

Brad Larson

170,088
45
397
571

score 3 · Answer 5 · answered Feb 12 '10 at 05:53

3

Stanford's CS193P class on iPhone had a project called HelloPoly that might be exactly what you want - see class home page for the spec and then see the video for how it was implemented (and google solutions from people who did the assignment).

answered Feb 12 '10 at 05:53

Adam Eberbach

12,309
6
62
114

How to draw polygons with CGPath?

5 Answers5

Linked