{"id":33,"date":"2019-12-01T02:25:00","date_gmt":"2019-12-01T02:25:00","guid":{"rendered":"http:\/\/gator3303.temp.domains\/~mathaes\/wp\/index.php\/2019\/12\/01\/dev-notebook-brush-like-drawing-in-swift-without-cgpattern\/"},"modified":"2019-12-01T02:25:00","modified_gmt":"2019-12-01T02:25:00","slug":"dev-notebook-brush-like-drawing-in-swift-without-cgpattern","status":"publish","type":"post","link":"https:\/\/mathaesthetics.com\/wp\/dev-notebook-brush-like-drawing-in-swift-without-cgpattern\/","title":{"rendered":"Dev notebook: brush-like drawing in Swift, without CGPattern"},"content":{"rendered":"

I’m spending a lot of time in Cocoa drawing and Core Graphics lately, working in Swift.<\/p>\n

The API around the Core Graphics CGPattern<\/a> object in Swift is a little challenging – it requires C callbacks and unsafe pointers for basic pattern-creation and drawing functionality. It also doesn’t work exactly as I’d like it to; I want to have more of a ‘brush’ metaphor where I can vary the ‘paint’ flow of the pattern being used to draw a line or a curve. But I definitely want a pattern-like construct that I can apply different stroke and fill colors to in order to draw.<\/p>\n

My solution is to use NSImage, which is really convenient because it’s a high-level object in Swift that can easily be created in memory or loaded from a .png resource in the app bundle.<\/p>\n

The approach:<\/b> given an NSImage that represents your brush pattern, create a copy NSImage that is rendered in the desired stroke color, then use that copy to draw your desired lines and curves, or tile it along with clipping to fill an area. I’ll include an example of drawing a line with varying density, and of filling an area with clipping and offset adjustment.<\/p>\n

<\/a>To give the key ingredient first, let’s add an extension to NSImage, to enable it make a copy of itself as a mask with a different foreground color applied. Any color can work, and the copied, colorized brush image then doesn’t rely on context stroke or fill color; we just draw it with normal image drawing operations.<\/p>\n

import<\/span> AppKit

extension<\/span> NSImage<\/span> {
    func<\/span> copyAsMaskWithFillColor<\/span>(color: NSColor<\/span>) -> NSImage<\/span> {
        let<\/span> newImage = NSImage.init<\/span>(size: self<\/span>.size<\/span>)
        newImage.lockFocus<\/span>()
        
        let<\/span> drawRect = CGRect<\/span>(origin: CGPoint<\/span>.zero, size: self<\/span>.size)
        let<\/span> context = NSGraphicsContext<\/span>.current<\/span>
        context?.cgContext<\/span>.clip<\/span>(to: drawRect, 
                             mask: self<\/span>.cgImage<\/span>(forProposedRect: nil<\/span>, 
                                                context: nil<\/span>, 
                                                hints: nil<\/span>)!)
        color.setFill<\/span>()
        context?.cgContext<\/span>.fill<\/span>(drawRect)
        context?.cgContext<\/span>.resetClip<\/span>()
        newImage.unlockFocus<\/span>()
        return<\/span> newImage
    }
}
<\/pre>\n
Next, let’s create a 24×24 pixel NSImage with a pattern that we will use as our brush. I’m creating a fuzzy gray circle that has higher alpha near the edge and is solid in the center. I’m doing this in an NSView draw(_ dirtyRect: NSRect)<\/code> override, but this part could be done earlier, in the initialization of a drawing component.<\/p>\n
let<\/span> brushImage = NSImage<\/span>(size: CGSize<\/span>(width: 24.0<\/span>, height: 24.0<\/span>))
brushImage.lockFocus<\/span>()
var<\/span> circleBounds = NSRect<\/span>(origin: CGPoint<\/span>.zero<\/span>, 
         size: brushImage.size<\/span>).insetBy<\/span>(dx: 2.0<\/span>, dy: 2.0<\/span>)
var<\/span> alpha = CGFloat<\/span>(0.1<\/span>)
repeat<\/span> {
    circleBounds = circleBounds.insetBy<\/span>(dx: 1.0<\/span>, dy: 1.0<\/span>)
    NSColor<\/span>(red: 0.5<\/span>, green: 0.5<\/span>, blue: 0.5<\/span>, alpha: alpha).setFill<\/span>()
    NSGraphicsContext<\/span>.current<\/span>?.cgContext<\/span>.fillEllipse<\/span>(in: circleBounds)
    alpha += 0.1<\/span>
} while<\/span> (alpha <= 1.0<\/span>)
brushImage.unlockFocus<\/span>()
<\/pre>\n
Making color copies of this brush could also be done beforehand, but I’m going to do it in the drawRect() override and just draw each image once to the screen to see the results:<\/p>\n
\/\/ draw our brush image in its original form<\/span>
var<\/span> drawRect = NSRect<\/span>(origin: CGPoint<\/span>(x:36.0<\/span>, y: 36.0<\/span>), 
                      size: brushImage.size<\/span>)
brushImage.draw<\/span>(in: drawRect)
        
\/\/ draw with orange color<\/span>
let<\/span> orangeBrush = brushImage.copyAsMaskWithFillColor<\/span>(color: NSColor<\/span>.orange<\/span>)
drawRect.origin<\/span>.x<\/span> += 36.0<\/span>
orangeBrush.draw<\/span>(in: drawRect)

\/\/ draw with with blue color<\/span>
let<\/span> blueBrush = brushImage.copyAsMaskWithFillColor<\/span>(color: NSColor<\/span>.blue<\/span>)
drawRect.origin<\/span>.x<\/span> += 36.0<\/span>
blueBrush.draw<\/span>(in: drawRect)
<\/pre>\n
Voila!<\/p>\n
<\/a><\/div>\n
To draw a line with such a brush, I defined a function that includes a density<\/code><\/b> parameter, which controls how often the image is drawn along the line. A density of 1.0 indicates one draw per pixel-length; 2.0 would draw twice per pixel-length, while 0.25 would only draw once every four pixel-lengths. Here’s the routine: <\/p>\n

func<\/span> imageBrushLine<\/span>(startPt: CGPoint<\/span>,
                    endPt: CGPoint<\/span>,
                    with image: NSImage<\/span>,
                    density: CGFloat<\/span> = 1.0<\/span>) {
    if<\/span> density <= 0.0<\/span> {
        \/\/ throw exception?<\/span>
        return<\/span>
    }
    var<\/span> imageRect = CGRect<\/span>.zero<\/span>
    imageRect.size<\/span> = image.size<\/span>
  
    let<\/span> distanceX = endPt.x<\/span> - startPt.x<\/span>
    let<\/span> distanceY = endPt.y<\/span> - startPt.y<\/span>
    let<\/span> distanceR = sqrt<\/span>(distanceX * distanceX + distanceY * distanceY)

    let<\/span> deltaR = (1.0<\/span> \/ density)
    let<\/span> steps = ceil<\/span>(distanceR \/ deltaR)
    var<\/span> renders : CGFloat<\/span> = 0.0<\/span>
            
    let<\/span> deltaX = distanceX \/ steps
    let<\/span> deltaY = distanceY \/ steps
        
    var<\/span> currentCenter = startPt
    repeat<\/span> {
        imageRect.origin<\/span>.x<\/span> = currentCenter.x<\/span> - imageRect.width<\/span> \/ 2.0<\/span>
        imageRect.origin<\/span>.y<\/span> = currentCenter.y<\/span> - imageRect.height<\/span> \/ 2.0<\/span>

        image.draw<\/span>(in: imageRect)
        currentCenter.x<\/span> += deltaX
        currentCenter.y<\/span> += deltaY
        renders += 1.0<\/span>
    } while<\/span> (renders <= steps)
}
<\/pre>\n
The lines here were drawn with the function above, and the brush images created previously. There are a variety of densities here, and also some lines drawn with start and end point moving negative in x or y direction or both.<\/p>\n
<\/a><\/div>\n
These brush images may be more suited for strokes than pattern filling, where you’d typically want a repeating pattern. Nonetheless, the same approach can be used on a fill pattern, to obtain a different color and draw the fill pattern with the desired colorized instance. Here is a sample method that fills a rect with a tiled image; other shapes would just require a different cgContext method and\/or clip region: <\/p>\n
func<\/span> fillRectWithImagePattern<\/span>(_ rect: CGRect<\/span>, image: NSImage<\/span>) {
    let<\/span> gc = NSGraphicsContext<\/span>.current<\/span>!
    gc.saveGraphicsState<\/span>()
    gc.cgContext<\/span>.setPatternPhase<\/span>(CGSize<\/span>(width: rect.origin<\/span>.x<\/span>,
                                        height: rect.origin<\/span>.y<\/span>))
    let<\/span> imgPattern = NSColor<\/span>(patternImage: image)
    imgPattern.set<\/span>()
    gc.cgContext<\/span>.fill<\/span>(rect)
    gc.restoreGraphicsState<\/span>()
}
<\/pre>\n
And the results with our orange brush, also using NSBezierPath to draw a frame around the rectangle: <\/p>\n
<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
I’m spending a lot of time in Cocoa drawing and Core Graphics lately, working in Swift. The API around the Core Graphics CGPattern object in Swift is a little challenging – it requires C callbacks and unsafe pointers for basic pattern-creation and drawing functionality. It also doesn’t work exactly as I’d like it to; I … Read moreDev notebook: brush-like drawing in Swift, without CGPattern<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[57,63,43,39,24,72,46,71,45,30],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-cocoa","category-core-graphics","category-development","category-drawing","category-macosprogrammer","category-nsimage","category-programming","category-quartz2d","category-swift","category-swiftprogramming"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":0,"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"wp:attachment":[{"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mathaesthetics.com\/wp\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}