Drawing in Swift Cocoa

Drawing in Swift – Cocoa

In this post we will be implementing some simple drawing using Swift Cocoa.

In this sample we have 6 Custom Views and each is a mapped to a custom subclass of NSView

SwiftDrawing

Swift – Drawing a circle inside a square using NSBezierPath

class SquareWithCircleView: NSView{
    override func drawRect(dirtyRect: NSRect)
    {
        var bPath:NSBezierPath = NSBezierPath(rect: dirtyRect)
        let fillColor = NSColor(red: 0.5, green: 0.0, blue: 0.5, alpha: 1.0)
        fillColor.set()
        bPath.fill()
        
        let borderColor = NSColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
        borderColor.set()
        bPath.lineWidth = 12.0
        bPath.stroke()
        
        let circleFillColor = NSColor(red: 0.0, green: 1.0, blue: 0.0, alpha: 1.0)
        var circleRect = NSMakeRect(dirtyRect.size.width/4, dirtyRect.size.height/4, dirtyRect.size.width/2, dirtyRect.size.height/2)
        var cPath: NSBezierPath = NSBezierPath(ovalInRect: circleRect)
        circleFillColor.set()
        cPath.fill()
    }
}

Swift – Drawing different lines & Curves using NSBezierPath

class DifferentLinesView: NSView{
    override func drawRect(dirtyRect: NSRect)
    {
        let blackColor = NSColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
        blackColor.set()
        
        var bPath: NSBezierPath = NSBezierPath(rect:dirtyRect)
        bPath.moveToPoint(NSMakePoint(20, 20))
        bPath.lineToPoint(NSMakePoint(dirtyRect.size.width - 20, 20))
        bPath.lineWidth = 10.0
        bPath.stroke()
        
        
        bPath = NSBezierPath(rect:dirtyRect)
        var lineDash:[CGFloat] = [20.0,5.0,5.0]
        bPath.moveToPoint(NSMakePoint(20, 75))
        bPath.lineToPoint(NSMakePoint(dirtyRect.size.width - 20, 75))
        bPath.lineWidth = 10.0
        bPath.setLineDash(lineDash, count: 3, phase: 0.0)
        bPath.stroke()
        

        bPath = NSBezierPath(rect:dirtyRect)
        bPath.moveToPoint(NSMakePoint(20, 125))
        bPath.curveToPoint(NSMakePoint(dirtyRect.size.width - 20, 125), controlPoint1: NSMakePoint(100, 200), controlPoint2: NSMakePoint(150, 200))
        bPath.lineWidth = 4.0
        bPath.stroke()
    }
}

Swift – Drawing a Multi-Color Gradient View

class MultiColorGradientView: NSView{
    override func drawRect(dirtyRect: NSRect)
    {
        var bPath:NSBezierPath = NSBezierPath()
        bPath.appendBezierPathWithRoundedRect(dirtyRect, xRadius: 10.0, yRadius: 10.0)
        
        var gradient:NSGradient = NSGradient(colorsAndLocations:
            (NSColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0),0.0),
            (NSColor(red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0),0.25),
            (NSColor(red: 0.0, green: 1.0, blue: 0.0, alpha: 1.0),0.50),
            (NSColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0),0.75),
            (NSColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0),1.0))
        
        gradient.drawInBezierPath(bPath, angle: 0.0)
        
    }
}

Swift – Drawing a two color gradient view

class TwoColorGradientView: NSView{
    override func drawRect(dirtyRect: NSRect)
    {
        var bPath:NSBezierPath = NSBezierPath()
        bPath.appendBezierPathWithRoundedRect(dirtyRect, xRadius: 10.0, yRadius: 10.0)
        
        var gradient:NSGradient = NSGradient(startingColor: NSColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0), endingColor: NSColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0))
        
        gradient.drawInBezierPath(bPath, angle: 0.0)
    }
}

Swift – Drawing a simple grid view Using NSBezierPath

class GridView:NSView {
    override func drawRect(dirtyRect: NSRect)
    {
        let blackColor = NSColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
        blackColor.set()
        var width = dirtyRect.size.width
        var height = dirtyRect.size.height
        let noHLines = 5;
        let noVLines = 10;
        let vSpacing = dirtyRect.size.height / CGFloat(noHLines)
        let hSpacing = dirtyRect.size.width / CGFloat(noVLines)
        var i:Int = 0;
        var bPath:NSBezierPath = NSBezierPath()
        bPath.lineWidth = 1.0
        for (i = 0; i < noHLines; i++){
            var yVal = CGFloat(i) * vSpacing
            bPath.moveToPoint(NSMakePoint(0, yVal))
            bPath.lineToPoint(NSMakePoint(dirtyRect.size.width , yVal))
        }
        bPath.stroke()
        for (i = 0; i < noVLines; i++){
            var xVal = CGFloat(i) * hSpacing
            bPath.moveToPoint(NSMakePoint(xVal, 0))
            bPath.lineToPoint(NSMakePoint(xVal, dirtyRect.size.height))
        }
        bPath.stroke()
    }
}

Swift – Drawing Sin Curve Using NSBezierPath

class SineCurveView: NSView{
    override func drawRect(dirtyRect: NSRect)
    {
        NSGraphicsContext.saveGraphicsState()
        var bPath: NSBezierPath = NSBezierPath(rect: dirtyRect)
        let blackColor = NSColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
        blackColor.set()
        blackColor.setFill()
        bPath.fill()
        NSGraphicsContext.restoreGraphicsState()
        
        var width = dirtyRect.size.width
        var height = dirtyRect.size.height
        
        var numberOfSineCurves = 30
        var cWidth = 20.0
        var cHeight = height / 3.5
        
        let redColor = NSColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
        for (var i = 0; i < numberOfSineCurves; i++)
        {
            var sinePath: NSBezierPath = NSBezierPath()
            redColor.set()
            sinePath.lineWidth = 1.0
            var xVal = (CGFloat(i) * 5) + 10
            sinePath.moveToPoint(NSMakePoint(xVal, height/2))
            for (var j = 0; j < Int(width); j++ )
            {
                var xPart1: CGFloat = (CGFloat(i) * 6) + 15
                var xPart2 : CGFloat = (CGFloat(j) * CGFloat(cWidth)) + 10
                var x1Val: CGFloat = xPart1 + xPart2
                var yVal10 : CGFloat = (6.28 * CGFloat(j))/20
                var yVal11 = sin(yVal10)  * cHeight
                var yVal12 = height/2 - yVal11
                sinePath.lineToPoint(NSMakePoint(x1Val, yVal12))
            }
            sinePath.stroke()
        }
}
}


Posted in Cocoa, Swift Tagged with: , , , ,
One comment on “Drawing in Swift Cocoa
  1. Deoxys says:

    lol, that last view drawing is a joke right? 😉
    It takes one minute to draw these lines. I think drawing these lines pixel by pixel is by far not the most elegant way to accomplish this.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news