使用CAGradientLayer重現草圖漸變的正確方法

我想用四種給定顏色創建漸變圖層。我有一個漸變草圖文件。我有彩色停止的座標。我計算了CAGradientLayer的開始和結束點的標準化座標。我還計算了顏色相互轉換的位置。仍然該圖層與草圖圖像不匹配。你能幫我什麼可能是錯的？導出圖像的使用不是一種選擇，因爲圖層必須隨動畫更改爲其他漸變位置。使用CAGradientLayer重現草圖漸變的正確方法

let imageWidth: CGFloat = 375.0 
let imageHeihgt: CGFloat = 293.0 

class ViewController: UIViewController { 

    let homeColors: [UIColor] = [UIColor(red: 62/255, green: 131/255, blue: 255/255, alpha: 1.0), 
           UIColor(red: 99/255, green: 22/255, blue: 203/255, alpha: 1.0), 
           UIColor(red: 122/255, green: 5/255, blue: 239/255, alpha: 1.0), 
           UIColor(red: 122/255, green: 5/255, blue: 240/255, alpha: 1.0)] 

    let startPoint: CGPoint = CGPoint(x: -0.225/imageWidth*UIScreen.main.bounds.width, y: -0.582*imageHeihgt/UIScreen.main.bounds.height) 
    let endPoint: CGPoint = CGPoint(x: 1.088/imageWidth*UIScreen.main.bounds.width, y: 1.01*imageHeihgt/UIScreen.main.bounds.height) 

    let locations: [NSNumber] = [0.0, 0.734, 0.962, 1.0] 

    var subview: UIView! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     subview = UIView(frame: CGRect(x: 0, y: 20, width: imageWidth, height: imageHeihgt)) 
     view.addSubview(subview) 
     view.sendSubview(toBack: subview) 
     addGradientLayer() 
    } 

    func addGradientLayer() { 
     let gradient = CAGradientLayer() 
     gradient.frame = subview.bounds 
     gradient.colors = homeColors.map { $0.cgColor } 
     gradient.startPoint = startPoint 
     gradient.endPoint = endPoint 
     gradient.locations = locations 
     subview.layer.insertSublayer(gradient, at: 0) 
    } 
}

我附上了一些截圖以區別不同。這不是一個很大的差異，但仍然。

來源

2017-10-09 Gergely

它看起來像CAGradientLayer的端點不匹配草圖中的端點。我沒有受過良好的CAGradientLayer培訓，告訴您這是否可能將它們移動到圖層邊界以外 – yano

素描渲染圖形不同於iOS版。即使您完美匹配顏色和位置，最終結果仍然看起來不同。

如果您想要與Sketch文件完全匹配，則需要對顏色進行一些光學調整以解決差異。你的兩幅圖像非常接近，所以通過一些小的顏色調整，它應該看起來更接近。

試着讓你的淺藍色（左上角）和淺紫色（右下角）的活力減弱。我無法訪問您的Sketch文件，因此我無法建議新顏色以獲得完全匹配，但它不應該太難，只需要一點點試驗和錯誤。

來源

2017-10-09 18:36:33 nathan

如何進行這些調整？只是試驗？應該存在其他方式 – Gergely

@Gergely是的，只是嘗試一些新的顏色，直到它看起來不錯。我會從當前感興趣的顏色開始（比如左上角的淺藍色），然後進入素描並使顏色略微鮮豔（將顏色向下移動並移至顏色選擇器框的左側）。看看它是否有效，並從那裏進行調整。在這一點上，選擇顏色不僅僅是一門科學，更是一門藝術。 – nathan

具有諷刺意味的是我無法做到這一點：D當我手工做出任何更改時，情況會變得更糟。 – Gergely

使用CAGradientLayer重現草圖漸變的正確方法

回答

相關問題