CAGradientLayer、Shadow

231 阅读1分钟

CAGradientLayer

let layerView = UIView()
layerView.frame = CGRect(x: 20, y: 633, width: 79, height: 27)
// layerFillCode
let gradient = CAGradientLayer()
gradient.colors = [UIColor(red: 0.22, green: 0.74, blue: 1, alpha: 1).cgColor, UIColor(red: 0.24, green: 0.4, blue: 0.98, alpha: 1).cgColor]
gradient.locations = [0, 1]
gradient.frame = layerView.bounds
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)
layerView.layer.addSublayer(gradient)
layerView.layer.cornerRadius = 13.5;
view.addSubview(layerView)

image.png

locations 渐变颜色的分割点

从xxx - xxx 是渐变 其余地方不是

startPoint、endPoint

x轴 y轴

image.png

例子:左侧

// 白 -> 黑

gradient.colors = [UIColor.white.cgColor, UIColor.black.cgColor]

x : 0 - 1 y: 0 - 0 locations:[0,0.1]

image.png

例子:右侧

x : 0 - 1 y: 0 - 0 locations:[0.9,1]

image.png

均匀

x : 0 - 1 y: 0 - 1 locations:[0,1]

image.png

shadow

layerView.layer.shadowColor = UIColor.green.cgColor
layerView.layer.shadowOffset = CGSize(width: 0, height: 0)
layerView.layer.shadowRadius = 10
layerView.layer.shadowOpacity = 1

image.png

shadowOffset

layerView.layer.shadowOffset = CGSize(width: 10, height: 10)

image.png

// 和原样一样
let path = UIBezierPath(roundedRect: layerView.bounds, cornerRadius: 5)
layerView.layer.shadowPath = path.cgPath
layerView.layer.cornerRadius = 5

偏移量40

let path = UIBezierPath(roundedRect: CGRect(x: 40, y: 40, width: layerView.width, height: layerView.height), cornerRadius: 5)
layerView.layer.shadowPath = path.cgPath
layerView.layer.cornerRadius = 5

image.png

单边阴影 比如top 留着

let layerView = UIView()
layerView.frame = CGRect(x: 50, y: 50, width: kScreenWidth - 100, height: 200)
layerView.backgroundColor = .orange
contentView.addSubview(layerView)


layerView.layer.shadowColor = UIColor.black.cgColor
// 偏移量
layerView.layer.shadowOffset = CGSize(width: 0, height: 0)
// 半径
layerView.layer.shadowRadius = 4
// 透明度
layerView.layer.shadowOpacity = 1

// 单边
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: -(layerView.layer.shadowRadius/2.0), width: layerView.width, height: layerView.layer.shadowRadius), cornerRadius: 5)
layerView.layer.shadowPath = path.cgPath
layerView.layer.cornerRadius = 5

image.png

默认的

image.png

默认 offset 是 (0,-3)、opacity 默认是0 、radius 默认是3

调整 CGSize.zero

image.png

CAShapeLayer

- (void)tz_setCornerRect:(UIRectCorner)corners radius:(CGFloat)cornerRadius {

    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds

                                                   byRoundingCorners:corners

                                                         cornerRadii:CGSizeMake(cornerRadius, cornerRadius)];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];

    maskLayer.frame = self.bounds;

    maskLayer.path = maskPath.CGPath;

    self.layer.mask = maskLayer;

}

\