在 OSX 上，如何渐变填充路径笔触？

Posted 2023-03-13

【中文标题】在 OSX 上，如何渐变填充路径笔触？

【英文标题】：On OSX, how do I gradient fill a path stroke?

【发布时间】：2010-04-29 14:08:15

【问题描述】：

使用 Cocoa 或 Quartz 中的大量绘图函数，绘制路径并使用渐变填充它们相当容易。然而，我似乎无法找到一种可接受的方式来“描边” - 绘制一条线宽为几个像素的路径并使用渐变填充该描边。这是怎么做到的？

编辑：显然问题不够清楚。感谢您到目前为止的回复，但我已经想通了。我想做的是这样的：

_{（来源：emle.nl）}

左边的方块是 NSGradient 在路径中绘制的，后跟路径笔划消息。对的就是我想做的；我想用渐变填充笔触。

【问题讨论】：

链接失效了

【参考方案1】：

如果您将NSBezierPath 转换为CGPath，则可以使用CGContextReplacePathWithStrokedPath() 方法检索作为描边路径轮廓的路径。 Graham Cox 出色的 GCDrawKit 在 NSBezierPath 上有一个 -strokedPath 类别方法，无需下拉到 Core Graphics 即可为您完成此操作。

一旦您有了概述的路径，您就可以用NSGradient 填充该路径。

【讨论】：

太棒了！谢谢 :) 也感谢 drawkit 的链接，它看起来很不错。

我在完成这项工作时遇到了问题 - 我的渐变填充了整个剪切区域，而不是路径（也许这也与剪切有关）。我最终绘制了一个形状，它只是边框的轮廓，剪裁到该路径，然后使用渐变填充，效果最好。

【参考方案2】：

但是，我似乎无法找到一种可接受的方式来“描边”——绘制一条线宽为几个像素的路径并使用渐变填充该描边。这是怎么做到的？

[原答案替换为以下]

啊，我明白了。您想将渐变应用到笔画。

为此，您可以使用混合模式。我在another question. 的回答中解释了如何做到这一点，这是适合您目标的步骤列表：

开始transparency layer。 用任何不透明的颜色描边路径。 Set the blend mode 到 source in。 绘制渐变。 结束透明层。

【讨论】：

感谢您的回复。然而，这不是我试图达到的目标。我已经澄清了一些问题。

埃米尔：啊，我明白了。我已用新答案替换了之前的答案内容。

【参考方案3】：

根据 Peter Hosey 的回答，我设法做了一个简单的渐变曲线，如下所示：

我已经在 UIView 类的 drawRect(_:) 方法中通过编写以下代码来完成此操作：

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)

函数 createCurvePath() 返回一个 UIBezierPath 对象。我还将 path.lineWidth 设置为 5 点。

【讨论】：

你知道是否有可能让路径开始是蓝色，最后是红色，但是 f.e.将曲线折回起点？