Bonne façon de reproduire le dégradé d'esquisse avec CAGradientLayer

Question

Je voudrais créer un dégradé avec quatre couleurs données. J'ai un fichier d'esquisse pour les dégradés. J'ai les coordonnées pour les arrêts de couleur. J'ai calculé les coordonnées normalisées pour le début et le point final pour CAGradientLayer. J'ai également calculé l'emplacement où les couleurs se changent mutuellement. La couche ne correspond toujours pas à l'image de l'esquisse. Pouvez-vous m'aider ce qui pourrait être faux? L'utilisation de l'image exportée n'est pas une option car la couche doit changer d'animation pour les autres emplacements de dégradé.

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) 
    } 
} 

J'ai joint quelques captures d'écran pour faire la différence. Ce n'est pas une grosse différence mais quand même.

Answer 1

L'esquisse rend les graphiques différemment d'iOS. Même si vous faites parfaitement correspondre les couleurs et les emplacements, le résultat final sera toujours différent.

Si vous souhaitez une correspondance exacte avec le fichier Esquisse, vous devez apporter des ajustements optiques aux couleurs pour tenir compte des différences. Vos deux images sont très proches, donc avec quelques ajustements mineurs de couleur, il devrait regarder beaucoup plus près.

Essayez de rendre votre bleu clair (en haut à gauche) et violet clair (en bas à droite) moins vif. Je n'ai pas accès à votre fichier Sketch, donc je ne peux pas suggérer de nouvelles couleurs pour obtenir une correspondance exacte, mais ça ne devrait pas être trop dur, juste un peu d'essai et d'erreur.