Swift draw shadow to a uibezier path

前端 未结 3 1074
悲&欢浪女
悲&欢浪女 2021-02-06 16:01


I have a strange question. Even though I did read a lot of tutorials on how to do this, the final result only shows the bezier line, not any shadow whatsoever. My code is

3条回答
  •  挽巷
    挽巷 (楼主)
    2021-02-06 16:25

    I am using the shadow properties of my shape layer to add shadow to it. The best part of this approach is that I don't have to provide a path explicitly. The shadow follows the path of the layer. I am also animating the layer by changing path. In that case too the shadow animates seamlessly without a single line of code.

    Here is what I am doing (Swift 4.2)

        shapeLayer.path = curveShapePath(postion: initialPosition)
        shapeLayer.strokeColor = UIColor.clear.cgColor
        shapeLayer.fillColor = shapeBackgroundColor
        self.layer.addSublayer(shapeLayer)
    
        if shadow {
            shapeLayer.shadowRadius = 5.0
            shapeLayer.shadowColor = UIColor.gray.cgColor
            shapeLayer.shadowOpacity = 0.8
        }
    

    The curveShapePath method is the one that returns the path and is defined as follows:

    func curveShapePath(postion: CGFloat) -> CGPath {
        let height: CGFloat = 37.0
        let path = UIBezierPath()
    
        path.move(to: CGPoint(x: 0, y: 0)) // start top left
        path.addLine(to: CGPoint(x: (postion - height * 2), y: 0)) // the beginning of the trough
    
        // first curve down
        path.addCurve(to: CGPoint(x: postion, y: height),
                      controlPoint1: CGPoint(x: (postion - 30), y: 0), controlPoint2: CGPoint(x: postion - 35, y: height))
        // second curve up
        path.addCurve(to: CGPoint(x: (postion + height * 2), y: 0),
                      controlPoint1: CGPoint(x: postion + 35, y: height), controlPoint2: CGPoint(x: (postion + 30), y: 0))
    
        // complete the rect
        path.addLine(to: CGPoint(x: self.frame.width, y: 0))
        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
        path.addLine(to: CGPoint(x: 0, y: self.frame.height))
        path.close()
    
        return path.cgPath
    }
    

提交回复
热议问题