Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Crosshatch in IOS using CoreGraphics?

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)

like image 859
Greg Avatar asked Jun 15 '16 02:06

Greg


1 Answers

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:

enter image description here

like image 153
hbk Avatar answered Sep 21 '22 02:09

hbk