美文网首页项目排查 问题
iOS部分圆角、不规则形状和阴影同时存在

iOS部分圆角、不规则形状和阴影同时存在

作者: 迷路的小小 | 来源:发表于2021-10-29 13:41 被阅读0次

1. CAShapeLayer

class ShadowView: UIView {
    override class var layerClass: AnyClass {
        return CAShapeLayer.self
    }
    
    var shapeLayer: CAShapeLayer {
        return layer as! CAShapeLayer
    }
}

class MyViewController: UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        let aView = ShadowView(frame: CGRect(x: 50, y: 50, width: 200, height: 200))
        view.addSubview(aView)

        aView.shapeLayer.path = round().cgPath
        aView.shapeLayer.fillColor = UIColor.yellow.cgColor
        aView.shapeLayer.shadowPath = round().cgPath
        aView.shapeLayer.shadowColor = UIColor.red.cgColor
        aView.shapeLayer.shadowRadius = 10
        aView.shapeLayer.shadowOffset = CGSize(width: 0, height: 0)
        aView.shapeLayer.shadowOpacity = 1

        self.view = view
    }

    func round() -> UIBezierPath {
        let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 200, height: 150), cornerRadius: 100)

        return path
    }
}
CAShapeLayer

2. 部分圆角+阴影(draw)

class ShadowViewController: UIViewController {
    override func loadView() {
        let view = UIView()

        let bgView = ShadowView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
        bgView.backgroundColor = UIColor.lightGray
        view.addSubview(bgView)

        self.view = view
    }
}
PlaygroundPage.current.liveView = ShadowViewController()

采用绘图的方式,绘制显示的图形和其对应的阴影

class ShadowView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .clear
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        guard let context = UIGraphicsGetCurrentContext() else { return }

        let pathRect = bounds.insetBy(dx: 20, dy: 20)
        let rectanglePath = UIBezierPath(roundedRect: pathRect, byRoundingCorners: [.topLeft, .bottomRight], cornerRadii: CGSize(width: 20, height: 0))
        context.saveGState()

        let shadow = UIColor.blue.cgColor
        let shadowOffset = CGSize(width: 10, height: 10)
        let shadowRadius: CGFloat = 10

        context.setShadow(offset: shadowOffset, blur: shadowRadius, color: shadow)

        UIColor.red.setFill()

        rectanglePath.fill()

        context.restoreGState()
    }
}
贝塞尔曲线绘制图形

3. 任意图形+阴影(draw)

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        guard let context = UIGraphicsGetCurrentContext() else { return }
        
        let rectanglePath = UIBezierPath()
        rectanglePath.move(to: CGPoint(x: 20 + 30, y: 20))
        rectanglePath.addLine(to: CGPoint(x: rect.width - 20, y: 20))
        rectanglePath.addLine(to: CGPoint(x: rect.width - 20, y: rect.height - 20 - 60))
        rectanglePath.addQuadCurve(to: CGPoint(x: rect.width - 20 - 60, y: rect.height - 20), controlPoint: CGPoint(x: rect.width - 20, y: rect.height - 20))
        rectanglePath.addLine(to: CGPoint(x: 20, y: rect.height - 20))
        rectanglePath.addLine(to: CGPoint(x: 20, y: 20 + 30))
        rectanglePath.addQuadCurve(to: CGPoint(x: 20 + 30, y: 20), controlPoint: CGPoint(x: 20, y: 20))
        
        context.saveGState()

        let shadow = UIColor.blue.cgColor
        let shadowOffset = CGSize(width: 10, height: 10)
        let shadowRadius: CGFloat = 10

        context.setShadow(offset: shadowOffset, blur: shadowRadius, color: shadow)

        UIColor.red.setFill()

        rectanglePath.fill()

        context.restoreGState()
    }
image.png

相关文章

网友评论

    本文标题:iOS部分圆角、不规则形状和阴影同时存在

    本文链接:https://www.haomeiwen.com/subject/sdyialtx.html