CAGradientLayer 在 4 个不同的角上有 4 种颜色

Question

是否可以在 iOS 中创建具有 4 种不同颜色的渐变（我正在使用 Swift，但 Objective-C 中的示例也可能有帮助），但是每个颜色都从不同的角落散发出来？

我创建了一个渐变，可以从左上角->右下角或左下角->右上角放置颜色，但这只适用于 2 种颜色。这是我为此尝试的代码：

let gradientColors: Array <AnyObject> = [bottomColor1.CGColor, topColor2.CGColor]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.startPoint = CGPointMake(0.0, 1.0);
gradientLayer.endPoint = CGPointMake(1.0, 0.0);

这成功地创建了从一个角到另一个角的 2 色渐变，其中 bottomColor1 和 topColor2 为 UIColors。但是，我如何在另外两个角创建一个带有 2 种额外颜色的类似渐变？

Answer 1

感谢@Martin R 的建议，这里有一些代码可以创建看起来效果很好的混合。由于有太多的颜色，中间变得很暗，但最终得到了预期的效果：

let gradientColors: Array <AnyObject> = [topColor1.CGColor, UIColor.clearColor().CGColor]
let gradientLocations: Array <AnyObject> = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.startPoint = CGPointMake(0.0, 0.0);
gradientLayer.endPoint = CGPointMake(1.0, 1.0);

let gradientColors2: Array <AnyObject> = [bottomColor1.CGColor, UIColor.clearColor().CGColor]
let gradientLayer2: CAGradientLayer = CAGradientLayer()
gradientLayer2.colors = gradientColors2
gradientLayer2.locations = gradientLocations
gradientLayer2.startPoint = CGPointMake(0.0, 1.0);
gradientLayer2.endPoint = CGPointMake(1.0, 0.0);


let gradientColors3: Array <AnyObject> = [UIColor.clearColor().CGColor, topColor2.CGColor]
let gradientLayer3: CAGradientLayer = CAGradientLayer()
gradientLayer3.colors = gradientColors3
gradientLayer3.locations = gradientLocations
gradientLayer3.startPoint = CGPointMake(0.0, 0.0);
gradientLayer3.endPoint = CGPointMake(1.0, 1.0);

let gradientColors4: Array <AnyObject> = [UIColor.clearColor().CGColor, bottomColor2.CGColor]
let gradientLayer4: CAGradientLayer = CAGradientLayer()
gradientLayer4.colors = gradientColors4
gradientLayer4.locations = gradientLocations
gradientLayer4.startPoint = CGPointMake(0.0, 1.0);
gradientLayer4.endPoint = CGPointMake(1.0, 0.0);

根据 Martin 的建议，我创建了 4 个渐变，每个渐变从所需角的颜色到 UIColor.clearColor()，然后我相应地设置 startPoint/endPoint 从任一底部开始- 从左到右上或从左上到右下。

在这段代码之后，我只是将所有这些渐变层添加到我的 blendView 中，所有这些都具有相同的框架：

let background1 : CAGradientLayer = gradientLayer;
background1.frame = blendViewFrame;
let background2 : CAGradientLayer = gradientLayer2;
background2.frame = blendViewFrame;
let background3 : CAGradientLayer = gradientLayer3;
background3.frame = blendViewFrame;
let background4 : CAGradientLayer = gradientLayer4;
background4.frame = blendViewFrame;
blendView.layer.insertSublayer(background1, atIndex: 0)
blendView.layer.insertSublayer(background2, atIndex: 1)
blendView.layer.insertSublayer(background3, atIndex: 2)
blendView.layer.insertSublayer(background4, atIndex: 3)

所以最后，可以用 4 种不同的颜色绘制一个 4 角渐变...中间变得很暗，但上面是如何做的。

Answer 2

认为这个answer解决了这个问题，似乎也摆脱了"dark effect"。它没有使用 CAGradientLayer，而是使用自定义 UIView。

CAGradientLayer 在 4 个不同的角上有 4 种颜色

CAGradientLayer with 4 Colors in 4 Different Corners

gradient

ios

cagradientlayer

swift