Fill UIBezierPath with parallel lines - ios

Question

I'm trying to draw custom shape using UIBezierPath:
UIBezierPath *aPath = [UIBezierPath bezierPath];
[aPath moveToPoint:CGPointMake(100.0, 0.0)];
// Draw the lines.
[aPath addLineToPoint:CGPointMake(200.0, 40.0)];
[aPath addLineToPoint:CGPointMake(160, 140)];
[aPath addLineToPoint:CGPointMake(40.0, 140)];
[aPath addLineToPoint:CGPointMake(0.0, 40.0)];
[aPath closePath];
I want to fill it with parallel lines to make this stripped. I want to change color of this lines too.
Assume that I want to make them vertical.
I have to calculate somehow points on this path with regular interval, how I can do this?
I have found this UIColor colorWithPatternImage but then i cant change color and "density" of my lines inside shape.

Answer 1

Like Nikolai Ruhe said, the best option is to use your shape as the clipping path, and then draw some pattern inside the bounding box of the shape. Here's an example of what the code would look like
- (void)drawRect:(CGRect)rect
{
// create a UIBezierPath for the outline shape
UIBezierPath *aPath = [UIBezierPath bezierPath];
[aPath moveToPoint:CGPointMake(100.0, 0.0)];
[aPath addLineToPoint:CGPointMake(200.0, 40.0)];
[aPath addLineToPoint:CGPointMake(160, 140)];
[aPath addLineToPoint:CGPointMake(40.0, 140)];
[aPath addLineToPoint:CGPointMake(0.0, 40.0)];
[aPath closePath];
[aPath setLineWidth:10];
// get the bounding rectangle for the outline shape
CGRect bounds = aPath.bounds;
// create a UIBezierPath for the fill pattern
UIBezierPath *stripes = [UIBezierPath bezierPath];
for ( int x = 0; x < bounds.size.width; x += 20 )
{
[stripes moveToPoint:CGPointMake( bounds.origin.x + x, bounds.origin.y )];
[stripes addLineToPoint:CGPointMake( bounds.origin.x + x, bounds.origin.y + bounds.size.height )];
}
[stripes setLineWidth:10];
CGContextRef context = UIGraphicsGetCurrentContext();
// draw the fill pattern first, using the outline to clip
CGContextSaveGState( context ); // save the graphics state
[aPath addClip]; // use the outline as the clipping path
[[UIColor blueColor] set]; // blue color for vertical stripes
[stripes stroke]; // draw the stripes
CGContextRestoreGState( context ); // restore the graphics state, removes the clipping path
// draw the outline of the shape
[[UIColor greenColor] set]; // green color for the outline
[aPath stroke]; // draw the outline
}
Using Swift
override func draw(_ rect: CGRect){
// create a UIBezierPath for the outline shape
let aPath = UIBezierPath()
aPath.move(to: CGPoint(x: 100.0, y: 0.0))
aPath.addLine(to: CGPoint(x: 200.0, y: 40.0))
aPath.addLine(to: CGPoint(x: 160, y: 140))
aPath.addLine(to: CGPoint(x: 40.0, y: 140))
aPath.addLine(to: CGPoint(x: 0.0, y: 40.0))
aPath.close()
aPath.lineWidth = 10
// get the bounding rectangle for the outline shape
let bounds = aPath.bounds
// create a UIBezierPath for the fill pattern
let stripes = UIBezierPath()
for x in stride(from: 0, to: bounds.size.width, by: 20){
stripes.move(to: CGPoint(x: bounds.origin.x + x, y: bounds.origin.y ))
stripes.addLine(to: CGPoint(x: bounds.origin.x + x, y: bounds.origin.y + bounds.size.height ))
}
stripes.lineWidth = 10
let context = UIGraphicsGetCurrentContext()
// draw the fill pattern first, using the outline to clip
context!.saveGState() // save the graphics state
aPath.addClip() // use the outline as the clipping path
UIColor.blue.set() // blue color for vertical stripes
stripes.stroke() // draw the stripes
context!.restoreGState() // restore the graphics state, removes the clipping path
// draw the outline of the shape
UIColor.green.set() // green color for the outline
aPath.stroke() // draw the outline
}
Produces

Answer 2

The best option is to set the original shape that you want to draw as a clipping path (CGContextClip) on the context.
Now, just draw all the parallel lines into the bounding box of the shape. You are free to vary the color or distance of the lines, then.

Answer 3

I don't have code for this at the moment but you are going down the right path with [UIColor colorWithPatternImage:....
However, if you want to make this more flexible you could generate the image programatically.
You only need a very small image of a few pixels. Enough for one of each colour of stripe.
If your stripes are green and red and the green is 4 pixels wide and the red 3 pixels wide then you only need an image that is 1 pixel wide and 7 pixels tall.
Then use this automatically generated image as the pattern image for the colour.
That's probably the easiest way I can think of.
Generating an image is not very hard. There are many SO questions about drawing into an image context.