美文网首页
iOS绘制带圆角的平行四边形

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

作者: 前年的邂逅_Jerry | 来源:发表于2020-12-26 23:36 被阅读0次

    一、平行四边形

        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")
        }
    }
    
    

    相关文章

      网友评论

          本文标题:iOS绘制带圆角的平行四边形

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