On OSX, how do I gradient fill a path stroke?

Question

Using the plethora of drawing functions in Cocoa or Quartz it's rather easy to draw paths, and fill them using a gradient. I can't seem to find an acceptable way however, to 'stroke'-draw a path with a line width of a few pixels and fill this stroke using a gradient. How is this done?

Edit: Apparently the question wasn't clear enough. Thanks for the responses so far, but I already figured that out. What I want to do is this:

_{(source: emle.nl)}

The left square is NSGradient drawn in a path followed by a path stroke message. The right is what I want to do; I want to fill the stroke using the gradient.

The link no longer works – SwiftsNamesake Sep 16 '18 at 00:04 — SwiftsNamesake, Sep 16 '18 at 00:04

Rob Keniger · Accepted Answer · 2010-05-05T02:19:35.590

22

If you convert the NSBezierPath to a CGPath, you can use the CGContextReplacePathWithStrokedPath() method to retrieve a path that is the outline of the stroked path. Graham Cox's excellent GCDrawKit has a -strokedPath category method on NSBezierPath that will do this for you without needing to drop down to Core Graphics.

Once you have the outlined path, you can fill that path with an NSGradient.

edited May 05 '10 at 02:19

answered May 05 '10 at 01:25

Rob Keniger

45,830
6
101
134

Wonderful! Thank you :) Thanks for the link to drawkit too, it looks very nice. – Emiel May 06 '10 at 09:58
I had problems making this work- my gradient filled the entire clipped area, rather than the path (perhaps this had to do with doing clipping as well). I ended up drawing one shape that was simply the outline of the border, clipping to that path, and then using the gradient fill, and that worked best. – GoldenBoy Nov 29 '10 at 19:14

score 14 · Answer 2 · edited May 23 '17 at 12:17

14

I can't seem to find an acceptable way however, to 'stroke'-draw a path with a line width of a few pixels and fill this stroke using a gradient. How is this done?

[Original answer replaced with the following]

Ah, I see. You want to apply the gradient to the stroke.

To do that, you use a blend mode. I explained how to do this in an answer on another question. Here's the list of steps, adapted to your goal:

Begin a transparency layer.
Stroke the path with any non-transparent color.
Set the blend mode to source in.
Draw the gradient.
End the transparency layer.

edited May 23 '17 at 12:17

Community

1
1

answered Apr 29 '10 at 16:50

Peter Hosey

95,783
15
211
370

Thanks for the reply. It's however, not what I try to achieve. I've clarified the question a bit. – Emiel May 04 '10 at 09:32
Emiel: Ah, I see. I've replaced the previous contents of my answer with a new answer. – Peter Hosey May 05 '10 at 00:47

score 9 · Answer 3 · answered May 21 '16 at 09:33

According to Peter Hosey's answer I've managed to do a simple gradient curve, which looks like this:

I've done this in drawRect(_:) method of UIView class by writing the code below:

override func drawRect(rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()

    CGContextBeginTransparencyLayer (context, nil)
    let path = createCurvePath()
    UIColor.blueColor().setStroke()
    path.stroke()
    CGContextSetBlendMode(context, .SourceIn)

    let colors          = [UIColor.blueColor().CGColor, UIColor.redColor().CGColor]
    let colorSpace      = CGColorSpaceCreateDeviceRGB()
    let colorLocations  :[CGFloat] = [0.0, 1.0]
    let gradient        = CGGradientCreateWithColors(colorSpace, colors, colorLocations)
    let startPoint      = CGPoint(x: 0.0, y: rect.size.height / 2)
    let endPoint        = CGPoint(x: rect.size.width, y: rect.size.height / 2)

    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, CGGradientDrawingOptions.DrawsBeforeStartLocation)
    CGContextEndTransparencyLayer(context)
}

Function createCurvePath() returns an UIBezierPath object. I've also set path.lineWidth to 5 points.

Do you know if it's possible to make the path be blue in the beginning and red in the end, but f.e. bend the curve back to where it started? — Georg, Apr 20 '17 at 12:49

On OSX, how do I gradient fill a path stroke?

3 Answers3

Linked