ios - 如何用倾斜的渐变填充 CAShapeLayer

Question

如何用渐变和 45 度角填充 CAShapeLayer()？

例如，在图片 1 中，下面的代码绘制了一个正方形并用蓝色填充图层 (UIColor.blueColor().CGColor)。

但是，我如何用从蓝色到红色的 45 度角的渐变填充它，就像在 Image 2 中一样(即 UIColor.blueColor().CGColor 到UIColor.redColor().CGColor)?

代码:

let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 0, y: 0))
path.addLineToPoint(CGPoint(x: 0, y: 100))
path.addLineToPoint(CGPoint(x: 100, y: 100))
path.addLineToPoint(CGPoint(x: 100, y: 0))
path.closePath()

let shape = CAShapeLayer()
shape.path = path.CGPath
shape.fillColor = UIColor.blueColor().CGColor

Answer 1

为什么不使用具有 startPoint 和 endPoint 属性的 CAGradientLayer。

你可以这样做:

import UIKit
import PlaygroundSupport

let frame = CGRect(x: 0, y: 0, width: 100, height: 100)
let view = UIView(frame: frame)

PlaygroundPage.current.liveView = view

let path = UIBezierPath(ovalIn: frame)

let shape = CAShapeLayer()
shape.frame = frame
shape.path = path.cgPath
shape.fillColor = UIColor.blue.cgColor

let gradient = CAGradientLayer()
gradient.frame = frame
gradient.colors = [UIColor.blue.cgColor,
                   UIColor.red.cgColor]
gradient.startPoint = CGPoint(x: 0, y: 1)
gradient.endPoint = CGPoint(x: 1, y: 0)
gradient.mask = shape

view.layer.addSublayer(gradient)

注意:为圆形添加了贝塞尔曲线路径，因为它可以在没有正方形 mask 的情况下工作。