向 CALayer 添加多个遮罩(1 个用于添加角)
Add multiple mask to CALayer (1 is for adding corner)
我想UI这样
我希望这个视图有圆角和阴影。
这是我在 Xib 中的视图层次结构:
-Content View
- Shadow View
- Container View
- Left View
- Concave View
- Action View
这是我实现当前 UI:
的代码片段
凹路径:
let couponPath = UIBezierPath()
let zeroPoint = CGPoint.zero
couponPath.move(to: zeroPoint)
couponPath.addLine(to: CGPoint(x: leftView.frame.width, y: zeroPoint.y))
let radius = concaveView.frame.width / 2
let centerX = zeroPoint.x + leftView.frame.width + radius
couponPath.addArc(withCenter: CGPoint(x: centerX, y: zeroPoint.y), radius: radius, startAngle: CGFloat.pi, endAngle: 0, clockwise: false)
couponPath.addLine(to: CGPoint(x: containerView.frame.width, y: zeroPoint.y))
couponPath.addLine(to: CGPoint(x: containerView.frame.width, y: containerView.frame.height))
couponPath.addArc(withCenter: CGPoint(x: leftView.frame.width + radius, y: containerView.frame.height), radius: radius, startAngle: CGFloat.pi * 0, endAngle: CGFloat.pi, clockwise: false)
couponPath.addLine(to: CGPoint(x: zeroPoint.x, y: containerView.frame.height))
couponPath.close()
然后我创建 CALayer
路径是 couponPath
。
let shapeLayer = CAShapeLayer()
shapeLayer.path = couponPath.cgPath
然后我将它屏蔽到我的 containerView:
self.containerView.layer.mask = shapeLayer
我尝试使用此代码添加阴影。
let shadowLayer = CAShapeLayer()
shadowLayer.frame = containerView.frame
shadowLayer.path = shapeLayer.path
shadowLayer.shadowOpacity = 0.5
shadowLayer.shadowRadius = 5
shadowLayer.masksToBounds = false
shadowLayer.shadowOffset = CGSize(width: 0, height: 20)
self.shadowView.layer.addSublayer(shadowLayer)
如何添加另一个遮罩来改变容器视图的半径?
有没有更好的方法来添加阴影而不是使用新视图 (ShadowView) 并在其上应用阴影?
这是我的 xib 和视图 Gist
谢谢。
这应该可以帮助您解决阴影和圆角问题。您设置 shadowView 层而不是添加子层。
class RoundedCornerView: UIView {
var shadowView: UIView?
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
func setup() {
// Set the layer of the main view to have rounded corners
layer.cornerRadius = 12.0
layer.masksToBounds = true
// Create a shadow view and its mask
shadowView = UIView(frame: bounds)
addSubview(shadowView!)
sendSubviewToBack(shadowView!)
shadowView?.layer.shadowColor = UIColor.black.cgColor
shadowView?.layer.shadowOffset = 4.0
shadowView?.layer.shadowOpacity = 0.4
shadowView?.layer.shadowRadius = 12.0
shadowView?.layer.shadowPath = UIBezierPath(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath
shadowView?.layer.masksToBounds = false
shadowView?.clipsToBounds = false
}
}
我最终使用 this answer on Whosebug 和一些自定义来添加阴影和角。
我想UI这样
我希望这个视图有圆角和阴影。
这是我在 Xib 中的视图层次结构:
-Content View
- Shadow View
- Container View
- Left View
- Concave View
- Action View
这是我实现当前 UI:
的代码片段凹路径:
let couponPath = UIBezierPath()
let zeroPoint = CGPoint.zero
couponPath.move(to: zeroPoint)
couponPath.addLine(to: CGPoint(x: leftView.frame.width, y: zeroPoint.y))
let radius = concaveView.frame.width / 2
let centerX = zeroPoint.x + leftView.frame.width + radius
couponPath.addArc(withCenter: CGPoint(x: centerX, y: zeroPoint.y), radius: radius, startAngle: CGFloat.pi, endAngle: 0, clockwise: false)
couponPath.addLine(to: CGPoint(x: containerView.frame.width, y: zeroPoint.y))
couponPath.addLine(to: CGPoint(x: containerView.frame.width, y: containerView.frame.height))
couponPath.addArc(withCenter: CGPoint(x: leftView.frame.width + radius, y: containerView.frame.height), radius: radius, startAngle: CGFloat.pi * 0, endAngle: CGFloat.pi, clockwise: false)
couponPath.addLine(to: CGPoint(x: zeroPoint.x, y: containerView.frame.height))
couponPath.close()
然后我创建 CALayer
路径是 couponPath
。
let shapeLayer = CAShapeLayer()
shapeLayer.path = couponPath.cgPath
然后我将它屏蔽到我的 containerView:
self.containerView.layer.mask = shapeLayer
我尝试使用此代码添加阴影。
let shadowLayer = CAShapeLayer()
shadowLayer.frame = containerView.frame
shadowLayer.path = shapeLayer.path
shadowLayer.shadowOpacity = 0.5
shadowLayer.shadowRadius = 5
shadowLayer.masksToBounds = false
shadowLayer.shadowOffset = CGSize(width: 0, height: 20)
self.shadowView.layer.addSublayer(shadowLayer)
如何添加另一个遮罩来改变容器视图的半径? 有没有更好的方法来添加阴影而不是使用新视图 (ShadowView) 并在其上应用阴影?
这是我的 xib 和视图 Gist
谢谢。
这应该可以帮助您解决阴影和圆角问题。您设置 shadowView 层而不是添加子层。
class RoundedCornerView: UIView {
var shadowView: UIView?
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
func setup() {
// Set the layer of the main view to have rounded corners
layer.cornerRadius = 12.0
layer.masksToBounds = true
// Create a shadow view and its mask
shadowView = UIView(frame: bounds)
addSubview(shadowView!)
sendSubviewToBack(shadowView!)
shadowView?.layer.shadowColor = UIColor.black.cgColor
shadowView?.layer.shadowOffset = 4.0
shadowView?.layer.shadowOpacity = 0.4
shadowView?.layer.shadowRadius = 12.0
shadowView?.layer.shadowPath = UIBezierPath(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath
shadowView?.layer.masksToBounds = false
shadowView?.clipsToBounds = false
}
}
我最终使用 this answer on Whosebug 和一些自定义来添加阴影和角。