Crosshatch in IOS using CoreGraphics?

Question

How would one crosshatch (apply a set of parallel lines at 45 degrees) across the fill of a shape in IOS using core graphics? Sample code?

(I'm specially interested in use with an MKPolygon in MKMapKit, however for the moment just trying to see if it's possible in a UIView using drawRect?. So fill the background of a UIView with crosshatch'ing)

Answer 1

for swift 3., using approach from @user3230875

final class CrossHatchView: UIView {
    
    // MARK: - LifeCycle
    
    override func draw(_ rect: CGRect) {

        // create rect path with bounds that equal to the 
        // size of a view, in addition it adds rounded corners, this will
        // be used later as a canvas for dash drawing
        let path:UIBezierPath = UIBezierPath(roundedRect: bounds, cornerRadius: 5)

        // specify the new area where the our drawing will be visible
        // check [link][1] for more
        path.addClip()
                
        // grab the size of drawing area
        let pathBounds = path.bounds

        // cleanUp rounded rect, that is drawn above
        // just remove roundedRect in the words
        path.removeAllPoints()

        // get start and end point of the line
        let p1 = CGPoint(x:pathBounds.maxX, y:0)
        let p2 = CGPoint(x:0, y:pathBounds.maxX)

        // draw line
        path.move(to: p1)
        path.addLine(to: p2)

        // set line width equal to double width of view
        // because we later will draw this line using dash pattern
        path.lineWidth = bounds.width * 2
        
        // set dash pattern with some interval
        let dashes:[CGFloat] = [0.5, 7.0]
        path.setLineDash(dashes, count: 2, phase: 0.0)

        // set color for line 
        UIColor.lightGray.withAlphaComponent(0.5).set()

        // actually draw a line using specific
        // color and dash pattern
        path.stroke()
    }
}

result:

Answer 2

Create a UIImage containing your crosshatch pattern in whatever way you want (e.g. by drawing it with Core Graphics or by loading it from a PNG file).

Then use +[UIColor colorWithPatternImage:] (Swift UIColor(patternImage:)) to create a “color” that draws the crosshatch image.

Finally, set the pattern color as your fill color, and fill the shape (presumably by filling a path that outlines the shape, or by using UIRectFill).

If you need more control over the pattern (to change how it's tiled or aligned), you can drop down to the Core Graphics level and use CGPatternCreate and CGColorCreateWithPattern.

Answer 3

hey try this sample code which i tried on a 300x300 UIView

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 1.5);
    CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
    int backward=0;

    for (int i=0;i<15; i++)
    {
        CGContextMoveToPoint(context, backward, 0);
        CGContextAddLineToPoint(context, 300, 300-backward);
        backward=backward+20;
    }
    int backwardNegitive=0;
    for (int i=0;i<15; i++)
    {
        CGContextMoveToPoint(context, 0,backwardNegitive);
        CGContextAddLineToPoint(context, 300-backwardNegitive,300);
        backwardNegitive=backwardNegitive+20;
    }
    int forward=0;
    for (int i=0;i<15; i++)
    {
        CGContextMoveToPoint(context, 300-forward, 0);
        CGContextAddLineToPoint(context, 0, 300-forward);
        forward=forward+20;
    }
    int forwardNegative=0;
    for (int i=0;i<15; i++)
    {
        CGContextMoveToPoint(context, 0,300+forwardNegative);
        CGContextAddLineToPoint(context,300+forwardNegative,0);
        forwardNegative=forwardNegative+20;
    }
    CGContextStrokePath(context);

}

Hope this help you.

Answer 4

Here's what I was talking about over in the Apple Developer Forum:

#import "CrossHatchView.h"

@implementation CrossHatchView

static  CGFloat  sides = 5.0;

- (void)drawRect:(CGRect)rect
{
    CGRect  bounds = self.bounds;

    UIBezierPath  *path = [UIBezierPath bezierPath];

    CGFloat  xCentre = CGRectGetMidX(bounds);
    CGFloat  yCentre = CGRectGetMidY(bounds);
    CGFloat  radius = 0.0;

    if (CGRectGetWidth(bounds) > CGRectGetHeight(bounds)) {
        radius = CGRectGetHeight(bounds) / 2.0;
    } else {
        radius = CGRectGetWidth(bounds) / 2.0;
    }
    CGFloat  angleIncrement = 2.0 * M_PI / sides;

    CGFloat  initialAngle = ( M_PI + (2.0 * M_PI / sides) ) / 2.0;

    for (NSUInteger  i = 0;  i < sides;  i++) {
        CGFloat  angle = initialAngle + i * angleIncrement;
        CGFloat  x = xCentre + radius * cos(angle);
        CGFloat  y = yCentre + radius * sin(angle);
        CGPoint  point = CGPointMake(x, y);
        if (i == 0) {
            [path moveToPoint:point];
        } else {
            [path addLineToPoint:point];
        }
    }
    [path closePath];
    [[UIColor cyanColor] set];
    [path addClip];

    CGRect  pathBounds = [path bounds];

    [path removeAllPoints];
    CGPoint  p1 = pathBounds.origin;
    CGPoint  p2 = CGPointMake(CGRectGetMaxX(pathBounds), CGRectGetMaxY(pathBounds));
    [path moveToPoint:p1];
    [path addLineToPoint:p2];
    path.lineWidth = 400.0;
    CGFloat  dashes[] = { 2.0, 2.0 };
    [path setLineDash:dashes count:2 phase:0.0];
    [[UIColor blackColor] set];
    [path stroke];
}

@end