Ios CAGradientLayer位置不正确

我跟随帖子设置梯度位置

我的代码：

let color1 = UIColor(red: 0.0/255.0, green: 231.0/255.0, blue: 198.0/255.0, alpha: 0.9).cgColor as CGColor
let color2 = UIColor(red: 0.0/255.0, green: 198.0/255.0, blue: 255.0/255.0, alpha: 0.9).cgColor as CGColor      
self.gradientLayer.colors = [color2, color1, color2]
self.gradientLayer.locations = [0.0, 0.10, 0.9]
self.gradientLayer.startPoint = CGPoint(x: 0, y: 0)
self.gradientLayer.endPoint = CGPoint(x: 1, y: 1)
viewMain.layer.insertSublayer(self.gradientLayer, at: 0)  

我的输出：

let color1 = UIColor(red: 0.0/255.0, green: 231.0/255.0, blue: 198.0/255.0, alpha: 0.9).cgColor as CGColor
let color2 = UIColor(red: 0.0/255.0, green: 198.0/255.0, blue: 255.0/255.0, alpha: 0.9).cgColor as CGColor      
self.gradientLayer.colors = [color2, color1, color2]
self.gradientLayer.locations = [0.0, 0.10, 0.9]
self.gradientLayer.startPoint = CGPoint(x: 0, y: 0)
self.gradientLayer.endPoint = CGPoint(x: 1, y: 1)
viewMain.layer.insertSublayer(self.gradientLayer, at: 0)  

预期输出：

let color1 = UIColor(red: 0.0/255.0, green: 231.0/255.0, blue: 198.0/255.0, alpha: 0.9).cgColor as CGColor
let color2 = UIColor(red: 0.0/255.0, green: 198.0/255.0, blue: 255.0/255.0, alpha: 0.9).cgColor as CGColor      
self.gradientLayer.colors = [color2, color1, color2]
self.gradientLayer.locations = [0.0, 0.10, 0.9]
self.gradientLayer.startPoint = CGPoint(x: 0, y: 0)
self.gradientLayer.endPoint = CGPoint(x: 1, y: 1)
viewMain.layer.insertSublayer(self.gradientLayer, at: 0)  

---

为了便于演示，我更改了

起始点

/

端点

。 这段代码可以在XCode中使用。这不是最好的快速代码，但要关注逻辑/解释，而不是纯粹的快速代码

共享设置：

import Foundation
import UIKit

let viewsWidth: CGFloat = 300.0
let viewsHeight: CGFloat = 400.0

修复代码的方法是修改

位置

：

let viewMain: UIView = UIView(frame: CGRect(x: 0, y: 0, width: viewsWidth, height: viewsHeight))
let color1 = UIColor(red: 0.0/255.0, green: 231.0/255.0, blue: 198.0/255.0, alpha: 0.9).cgColor
let color2 = UIColor(red: 0.0/255.0, green: 198.0/255.0, blue: 255.0/255.0, alpha: 0.9).cgColor
var gradientLayer = CAGradientLayer.init()
gradientLayer.frame = viewMain.bounds
gradientLayer.colors = [color2, color1, color1, color2]
gradientLayer.locations = [0.0, 0.2, 0.8, 1.0]
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
viewMain.layer.insertSublayer(gradientLayer, at: 0)

viewMain //That's just for the Show Result action in Playground

ViewMain：

现在有一些解释

让我们首先在每个位置画一条线：

let otherView = UIView(frame: viewMain.bounds)
if let locations = gradientLayer.locations, let colors = gradientLayer.colors {
    for (index, aLocation) in locations.enumerated() {
        let aLine = UIView(frame: CGRect(x: viewsWidth*CGFloat(aLocation.floatValue)-2,
                                         y: 0,
                                         width: 4,
                                         height: viewsHeight))
        aLine.backgroundColor = UIColor(cgColor: colors[index] as! CGColor)
        otherView.addSubview(aLine)
    }
}

otherView //That's just for the Show Result action in Playground

其他视图：

现在，让我们为每条线绘制一个渐变，但只绘制一条（其余颜色设置为白色以简化）

大视野：

所示的插图不言自明

---

在每一条“线”（图2）上，当你想应用渐变时（图3），颜色从那条线一直到下一条线。这就是为什么你的第一个位置没有给出预期的结果。您需要放置中间步骤。

为了便于演示，我更改了

起点

/

终点。
这段代码可以在XCode中使用。这不是最好的快速代码，但要关注逻辑/解释，而不是纯粹的快速代码

共享设置：

import Foundation
import UIKit

let viewsWidth: CGFloat = 300.0
let viewsHeight: CGFloat = 400.0

修复代码的方法是修改
位置
：

let viewMain: UIView = UIView(frame: CGRect(x: 0, y: 0, width: viewsWidth, height: viewsHeight))
let color1 = UIColor(red: 0.0/255.0, green: 231.0/255.0, blue: 198.0/255.0, alpha: 0.9).cgColor
let color2 = UIColor(red: 0.0/255.0, green: 198.0/255.0, blue: 255.0/255.0, alpha: 0.9).cgColor
var gradientLayer = CAGradientLayer.init()
gradientLayer.frame = viewMain.bounds
gradientLayer.colors = [color2, color1, color1, color2]
gradientLayer.locations = [0.0, 0.2, 0.8, 1.0]
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
viewMain.layer.insertSublayer(gradientLayer, at: 0)

viewMain //That's just for the Show Result action in Playground

ViewMain：


现在有一些解释

让我们首先在每个位置画一条线：

let otherView = UIView(frame: viewMain.bounds)
if let locations = gradientLayer.locations, let colors = gradientLayer.colors {
    for (index, aLocation) in locations.enumerated() {
        let aLine = UIView(frame: CGRect(x: viewsWidth*CGFloat(aLocation.floatValue)-2,
                                         y: 0,
                                         width: 4,
                                         height: viewsHeight))
        aLine.backgroundColor = UIColor(cgColor: colors[index] as! CGColor)
        otherView.addSubview(aLine)
    }
}

otherView //That's just for the Show Result action in Playground

其他视图：


现在，让我们为每条线绘制一个渐变，但只绘制一条（其余颜色设置为白色以简化）

大视野：

所示的插图不言自明

在每一条“线”（图2）上，当你想应用渐变时（图3），颜色从那条线一直到下一条线。这就是为什么你的第一个位置没有给出预期的结果。您需要放置中间步骤。
gradientLayer.colors=[color2，color1，color1，color2]；gradientLayer.locations=[0.0,0.2,0.8,1.0]
？你需要明白，这意味着颜色将在你给出的位置。但是在你的代码中它是
[0.0,0.10,0.9]
。想象一下，在0处写一条蓝线，在0.1处写一条绿线，在0.9处写一条蓝线。（根据起点/终点以对角线方式）。现在，在每一条线之间应用渐变颜色（“两条连续线的渐变在中间相交”）。你得到的是以前的输出而不是预期的输出，这很正常。@Larme:抱歉，我发现很难理解这一点。但是我给出的颜色/位置让它工作了吗？我正在做一个视觉解释。几小时后可能会来（在家里做）@Larme:是的。确实如此。
cgColor作为cgColor
从cgColor到cgColor的转换是毫无意义的
gradientLayer.colors=[color2，color1，color1，color2]；gradientLayer.locations=[0.0,0.2,0.8,1.0]
？你需要明白，这意味着颜色将在你给出的位置。但是在你的代码中它是
[0.0,0.10,0.9]
。想象一下，在0处写一条蓝线，在0.1处写一条绿线，在0.9处写一条蓝线。（根据起点/终点以对角线方式）。现在，在每一条线之间应用渐变颜色（“两条连续线的渐变在中间相交”）。你得到的是以前的输出而不是预期的输出，这很正常。@Larme:抱歉，我发现很难理解这一点。但是我给出的颜色/位置让它工作了吗？我正在做一个视觉解释。几小时后可能会来（在家里做）@Larme:是的。确实是这样。
cgColor作为cgColor
从cgColor到cgColor的转换是毫无意义的。感谢您的投入@Larne。虽然你的评论帮助解决了昨天的问题，但这已经足够解释这个问题了。非常感谢你的意见@Larne。虽然你的评论帮助解决了昨天的问题，但这已经足够解释这个问题了。