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

前端 未结 3 448
遇见更好的自我
遇见更好的自我 2020-12-04 18:32

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,

相关标签:
3条回答
  • 2020-12-04 19:10

    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:

    1. Begin a transparency layer.
    2. Stroke the path with any non-transparent color.
    3. Set the blend mode to source in.
    4. Draw the gradient.
    5. End the transparency layer.
    0 讨论(0)
  • 2020-12-04 19:34

    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.

    0 讨论(0)
  • 2020-12-04 19:36

    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.

    0 讨论(0)
提交回复
热议问题