iOS绘制带圆角的平行四边形

一、平行四边形

    private func drawParallelogramBezierPath(leftTopRadius : CGFloat , leftBottomRadius : CGFloat , rightTopRadius : CGFloat , rightBottomRadius : CGFloat ,rect : CGRect , smallAngle  : CGFloat) -> UIBezierPath{
        let bezierPath = UIBezierPath()
        /// 左上角的圆心点
        let leftTopX = rect.height / tan(smallAngle) + leftTopRadius * tan(smallAngle / 2.0)
        let leftTopY = leftTopRadius
        let lettTopPoint = CGPoint(x: leftTopX, y: leftTopY)
        /// 左下角的圆心点
        let leftBottomX = leftBottomRadius / tan(smallAngle / 2)
        let leftBottomY = rect.height - leftBottomRadius
        let leftBottomPoint = CGPoint(x: leftBottomX, y: leftBottomY)
        
        /// 右上角的圆心点
        let rightTopX = rect.width - rightTopRadius / tan(smallAngle / 2.0)
        let rightTopY = rightTopRadius
        let rightTopPoint = CGPoint(x: rightTopX, y: rightTopY)
        /// 右下角的圆心点
        let rightBottomX = rect.width - rightBottomRadius * tan(smallAngle / 2) - rect.height / tan(smallAngle)
        let rightBottomY = rect.height - rightBottomRadius
        let rightBottomPoint = CGPoint(x: rightBottomX, y: rightBottomY)
        
        ///左上角结束点
        let leftTopEndX = leftTopX - sin(smallAngle) * leftTopRadius
        let leftTopEndY = leftTopRadius - cos(smallAngle) * leftTopRadius
        let leftTopEndPoint = CGPoint(x: leftTopEndX, y: leftTopEndY)
        
        bezierPath.addArc(withCenter: lettTopPoint, radius: leftTopRadius, startAngle: -CGFloat.pi / 2.0 - smallAngle, endAngle: -CGFloat.pi / 2.0, clockwise: true)
        bezierPath.addArc(withCenter: rightTopPoint, radius: rightTopRadius, startAngle: -CGFloat.pi / 2.0, endAngle: CGFloat.pi / 2.0 - smallAngle, clockwise: true)
        bezierPath.addArc(withCenter: rightBottomPoint, radius: rightBottomRadius, startAngle: CGFloat.pi / 2.0 - smallAngle, endAngle: CGFloat.pi / 2.0, clockwise: true)
        bezierPath.addArc(withCenter: leftBottomPoint, radius: leftBottomRadius, startAngle: CGFloat.pi / 2.0 , endAngle: 3 / 2 * CGFloat.pi - smallAngle, clockwise: true)
        bezierPath.addLine(to: leftTopEndPoint)
        return bezierPath
    }

2、带渐变色的平行四边形

class InnerView : UIView{
    /// 边框
    lazy var lineLayer : CAShapeLayer = {
        let layer =  CAShapeLayer()
        layer.lineWidth = 10
        layer.strokeColor = UIColor.blue.cgColor
        return layer
    }()
    /// 渐变色
    lazy var gradientLayer : CAGradientLayer = {
        let layer = CAGradientLayer()
        let color2 = UIColor.orange.cgColor
        let color1 = UIColor.systemPink.cgColor
        layer.startPoint = CGPoint(x: 0, y: 0)
        layer.endPoint = CGPoint(x:1, y:0)
        layer.colors = [color1,color2]
        
        return layer
    }()
    /// 绘制渐变色
    private func drawGradientLayer(_ rect : CGRect){
        gradientLayer.frame = rect
        let shaperLayer = CAShapeLayer()
        shaperLayer.path = CustomBtn.drawParallelogramBezierPath(leftTopRadius: 20, leftBottomRadius: 5, rightTopRadius: 10, rightBottomRadius: 30, rect: rect, smallAngle: CGFloat.pi / 3).cgPath
        self.layer.addSublayer(shaperLayer)
        gradientLayer.mask = shaperLayer
    }
    init() {
        super.init(frame: .zero)
        self.layer.addSublayer(lineLayer)
        self.layer.addSublayer(gradientLayer)
        
    }
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        drawLine(rect)
        drawGradientLayer(rect)
        
    }
    /// 绘制外边框
    private func drawLine(_ rect : CGRect){
        let bezierPath = CustomBtn.drawParallelogramBezierPath(leftTopRadius: 20, leftBottomRadius: 5, rightTopRadius: 10, rightBottomRadius: 30, rect: rect, smallAngle: CGFloat.pi / 3).cgPath
        lineLayer.path = bezierPath
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}