CGGradient和路径裁剪：剪辑周围的奇怪边框答案

【问题标题】：CGGradient and path clipping: strange border around the clipCGGradient和路径裁剪：剪辑周围的奇怪边框
【发布时间】：2014-10-10 03:02:32
【问题描述】：

我正在尝试重现 iOS Programming: Big Nerd Ranch Guide 4th edition 一书中的一个示例。

请注意，我用 Swift 重写了书中所有的 Obj-C 代码。

作为一个挑战，本书要求使用 Core Graphics 绘制这个三角形渐变：

但是当我运行我的代码时，我注意到三角形周围有一个灰色的小边框：

我不明白为什么....这是我的代码：

    ....
    // draw circles
    UIColor.grayColor().setStroke()
    path.stroke()

    let logoImg = UIImage(named: "logo.png")
    let realSize:CGSize = logoImg.size.halve() // get a /2 CGSize in order to calculate non-retina size

    let gradientLocations:[CGFloat] = [0, 1]
    let gradientColors:[CGFloat] = [0, 1, 0, 1,
                                    1, 1, 0, 1]
    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let gradient = CGGradientCreateWithColorComponents(colorSpace, gradientColors, gradientLocations, 2)

    let gradientClipPath = UIBezierPath()
    gradientClipPath.moveToPoint(CGPoint(x: center.x - realSize.width/2, y: center.y + realSize.height/2 + 30))
    gradientClipPath.addLineToPoint(CGPoint(x: center.x + realSize.width/2, y: center.y + realSize.height/2 + 30))
    gradientClipPath.addLineToPoint(CGPoint(x: center.x, y: center.y - realSize.height/2 - 30))
    gradientClipPath.addLineToPoint(CGPoint(x: center.x - realSize.width/2, y: center.y + realSize.height/2 + 30))
    gradientClipPath.fill()

    // draw gradient
    CGContextSaveGState(currContext)
    gradientClipPath.addClip()
    CGContextDrawLinearGradient(currContext, gradient, CGPoint(x: 0, y: center.y - realSize.height/2 - 30), CGPoint(x: 0, y: center.y + realSize.height/2 + 30), 0)
    CGContextRestoreGState(currContext)

    // draw logo with drop shadow
    ....

将描边设置为清除或其他颜色无效。边框仍然存在，它仍然是灰色的。

【问题讨论】：

gradientClipPath.fill() 是否应该在代码中？我认为这是一个错误。如果不是这样，我真的无能为力，抱歉，这些天我总是使用CAShapeLayer，并且没有使用 Core Graphics。注意：你真的应该避免在现实世界的项目中使用核心图形。通常CAShapeLayer 更适合绘制贝塞尔路径。
我认为fill() 应该在那里，因为它会描画渐变将被绘制的区域......不是吗？请注意，这是本书中的一个挑战，因此我自己编写了部分代码。感谢您提供有关 CG 的提示。
尝试填写，我认为这是出错的部分。不填有帮助吗？
在家里，我会尽力告诉你，谢谢。
谢谢...成功了...我来自 Flash，您使用填充的剪贴蒙版。请重写您的评论作为答案，以便我接受。

标签： ios swift core-graphics

【解决方案1】：

您不需要在绘制渐变之前填充渐变路径。删除这一行：

gradientClipPath.fill()

【讨论】：