CAGradientLayer로 스케치 그라디언트를 재현하는 올바른 방법

Question

4 가지 색상으로 그라디언트 레이어를 만들고 싶습니다. 그라디언트에 대한 스케치 파일이 있습니다. 색상 멈춤 좌표가 있습니다. 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) 
    } 
} 

차이점을 명확히하기 위해 몇 가지 스크린 샷을 첨부했습니다. 여전히 큰 차이는 아니지만 여전히 그렇습니다.

Answer 1

스케치가 그래픽을 iOS와 다르게 렌더링합니다. 색상과 위치를 완벽하게 일치 시키더라도 최종 결과는 여전히 달라 보입니다.

스케치 파일과 정확하게 일치 시키려면 차이점을 고려하여 색상을 광학적으로 조정해야합니다. 두 개의 이미지가 매우 가깝기 때문에 약간의 색상 조정을하면 더 가까워 야합니다.

밝은 파란색 (왼쪽 위)과 밝은 보라색 (오른쪽 하단)이 생동감이 떨어지도록하십시오. Sketch 파일에 액세스 할 수 없으므로 정확하게 일치하는 새로운 색상을 제안 할 수는 없지만 약간의 시행 착오가 있어서는 안됩니다.