iOSグラジエントがグラジェントベクトルに垂直でない

Question

コンポーネントにグラデーションが追加されていますが、斜めになっています。この勾配は勾配ベクトルに対して垂直ではありません。便宜上、デバイスのiPhone 6はサイズを一定に設定しています。何が問題なの？

class ViewController: UIViewController { 

override func viewDidLoad() { 
    super.viewDidLoad() 

    let topPoint = CGPoint(x: 33, y: -55) 
    let botPoint = CGPoint(x: 217, y: 469) 

    let iPhoneSize = CGSize(width: 375, height: 667) 

    let additionalLayer = CAGradientLayer() 
    additionalLayer.frame = view.bounds 

    additionalLayer.startPoint = CGPoint(x: topPoint.x/iPhoneSize.width, y: topPoint.y/iPhoneSize.height) 
    additionalLayer.endPoint = CGPoint(x: botPoint.x/iPhoneSize.width, y: botPoint.y/iPhoneSize.height) 
    additionalLayer.colors = [UIColor.white.cgColor, UIColor.darkGray.cgColor, UIColor.black.cgColor] 
    additionalLayer.locations = [0.0, 0.468, 1.0] 
    drawLine(onLayer: additionalLayer, fromPoint: topPoint, toPoint: botPoint) 
    view.layer.addSublayer(additionalLayer) 
} 

func drawLine(onLayer layer: CALayer, fromPoint start: CGPoint, toPoint end: CGPoint) { 
    let line = CAShapeLayer() 
    let linePath = UIBezierPath() 
    linePath.move(to: start) 
    linePath.addLine(to: end) 
    line.path = linePath.cgPath 
    line.fillColor = nil 
    line.opacity = 1.0 
    line.strokeColor = UIColor.red.cgColor 
    layer.addSublayer(line) 
} 

}

P.S.私はこのコードをviewDidLayoutSubviews（）に追加しようとしました。

P.P.S.また、スクリーンショットを追加しました。

Answer 1

代わりCAGradientLayerの使用drawLinearGradient。

以下の迅速な解決の例：

override func viewDidLoad() { 
     super.viewDidLoad() 

     let topPoint = CGPoint(x: 33, y: -55) 
     let botPoint = CGPoint(x: 217, y: 469) 

     let additionalLayer = CALayer() 
     additionalLayer.frame = view.bounds 

     UIGraphicsBeginImageContext(view.bounds.size) 
     if let context = UIGraphicsGetCurrentContext() { 
      let colorSpace = CGColorSpaceCreateDeviceRGB() 
      let colors : [CGFloat] = [1.0, 1.0, 1.0, 1.0, 0.5, 0.5, 0.5, 1.0, 0.0, 0.0, 0.0, 1.0] 
      let locations : [CGFloat] = [0.0, 0.468, 1.0] 
      let gradient = CGGradient(colorSpace: colorSpace, colorComponents: colors, locations: locations, count: 3) 
      context.drawLinearGradient(gradient!, start: topPoint, end: botPoint, options: CGGradientDrawingOptions.drawsAfterEndLocation) 
      additionalLayer.contents = context.makeImage()! 
     } 
     drawLine(onLayer: additionalLayer, fromPoint: topPoint, toPoint: botPoint) 
     view.layer.addSublayer(additionalLayer) 
    } 

Screenshot with result