在ios中绘制图像的渐变

Question

如何以编程方式创建渐变颜色,如下图所示.

Answer 1

当你说"将它作为渐变应用于图像"时,你的意思是作为一个面具(在顶部显示图像,让图像在底部淡化为透明)？如果是这种情况,您可以使用以下方法将该渐变应用为蒙版CAGradientLayer:

CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
                        (id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask;

以上是一个简单的垂直渐变(因为默认是垂直,线性渐变).但你问startPoint,endPoint和locations.例如,如果您希望水平应用蒙版,则可以执行以下操作:

gradientMask.startPoint = CGPointMake(0.0, 0.5);   // start at left middle
gradientMask.endPoint = CGPointMake(1.0, 0.5);     // end at right middle

如果你想要两个渐变,一个在前10%,另一个在最后10%,你会做:

gradientMask.colors = @[(id)[UIColor clearColor].CGColor,
                        (id)[UIColor whiteColor].CGColor,
                        (id)[UIColor whiteColor].CGColor,
                        (id)[UIColor clearColor].CGColor];
gradientMask.locations = @[@0.0, @0.10, @0.90, @1.0];

如果您想要一个简单的渐变(而不是作为蒙版),您需要创建一个view渐变图层,然后添加渐变图层:

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor whiteColor].CGColor,
                    (id)[UIColor blackColor].CGColor];
[view.layer addSublayer:gradient];

请参阅CAGradientLayer 课程参考.

Answer 2

我刚刚为Swift 2.0编写了一个UIImage扩展.也许它有一些用处.您可以使用UIColor(任意数字)数组和应绘制渐变的框架来调用它.

extension UIImage {

    class func convertGradientToImage(colors: [UIColor], frame: CGRect) -> UIImage {

        // start with a CAGradientLayer
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = frame

        // add colors as CGCologRef to a new array and calculate the distances
        var colorsRef = [CGColor]()
        var locations = [NSNumber]()

        for i in 0 ... colors.count-1 {
            colorsRef.append(colors[i].CGColor as CGColorRef)
            locations.append(Float(i)/Float(colors.count-1))
        }

        gradientLayer.colors = colorsRef
        gradientLayer.locations = locations

        // now build a UIImage from the gradient
        UIGraphicsBeginImageContext(gradientLayer.bounds.size)
        gradientLayer.renderInContext(UIGraphicsGetCurrentContext()!)
        let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        // return the gradient image
        return gradientImage
    }
}

像这样称呼它:

let colors = [
    UIColor.blueColor(),
    UIColor.greenColor()
    // and many more if you wish
]
let gradientImage = UIImage.convertGradientToImage(colors, frame: navigationBar.bounds)

并申请:

.backgroundColor = UIColor(patternImage: gradientImage)

要么

.setBackgroundImage(gradientImage, forBarMetrics: .Default)