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

Posted 2023-02-23

【中文标题】CAGradientLayer 在 4 个不同的角落有 4 种颜色

【英文标题】：CAGradientLayer with 4 Colors in 4 Different Corners

【发布时间】：2015-05-17 06:28:10

【问题描述】：

是否可以在 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 种颜色？

【问题讨论】：

据我所知，Core Graphics 仅支持线性和径向阴影。

这不是线性的吗，只有两种以上的颜色？

不，渐变层只能进行分段线性着色。 locations 中的中间点在参数空间中，而不是视图中的任意点。比较cocoabuilder.com/archive/cocoa/…。

好的，我知道locations只是在参数空间中。您之前提到过 Gouraud 着色作为一种可能的解决方案，但基本上没有办法在本地做到这一点？

不，我不这么认为。也许您可以叠加 4 个线性阴影，每个阴影从一个角落的纯色变为对角的透明白色。只是一个想法。

【参考方案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 角渐变......中间变得很暗，但上面是如何做到的。

【参考方案2】：

认为answer 解决了这个问题，似乎也摆脱了“黑暗效应”。它不使用 CAGradientLayer，而是使用自定义 UIView。