Weird gradient when using CAGradientLayer with radial gradient. - ios

Question

Using code:
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let v = View()
view.addSubview(v)
v.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
}
}
class View : UIView {
let gradientLayer = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .blue
gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
gradientLayer.type = .radial
gradientLayer.colors = [
UIColor.red.cgColor,
UIColor.green.cgColor
]
self.layer.addSublayer(gradientLayer)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
expect(generated by Sketch):
code result on a iOS 12 simulator:
code result on a real iOS device:
My Xcode version is 10.0 (10A255), I found the problem occurs only when
startPoint.x == endPoint.x || startPoint.y == endPoint.y

Answer 1

When the y of startPoint and endPoint are equal, that means the height of the gradient ellipse will be 0.
In your code snippet, you can set entPoint's y to 1 to achieve the Sketch effect.
In the QuartzCore framework, there are the following comments:
/* Radial gradient. The gradient is defined as an ellipse with its
* center at 'startPoint' and its width and height defined by
* '(endPoint.x - startPoint.x) * 2' and '(endPoint.y - startPoint.y) *
* 2' respectively. */
#available(iOS 3.2, *)
public static let radial: CAGradientLayerType