美文网首页
iOS bezierPathWithRoundedRect圆弧不

iOS bezierPathWithRoundedRect圆弧不

作者: MQ_Twist | 来源:发表于2020-12-25 11:44 被阅读0次

    世界一直在变化,结果由我们来决定。

    前言

    圆角是UI设计钟爱的一种美化方式,iOS里面实现圆角的方式有很多种,不再赘述。圆角中,指定角圆角算是又高级一点,iOS中你可以有好几种画线方式去实现指定角圆角,今天仅聊有关贝塞尔曲线的实现方式,之前笔者写过一篇文章 -- iOS view任意角圆角,有兴趣的iOSer可以看看。

    正文

    先上Demo

    切入正题,笔者在指定角圆角时用贝塞尔曲线,用的方法是:

    + (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
    

    bezierPathWithRoundedRect作指定圆角的时候发现,在高度不变,在一定宽度范围内,所出来的圆角效果不是自己想要的,可明显看出来不是完整圆。效果如下:


    ViewCorner.gif

    神奇的是,好像三个角的时候会是这个样子,具体的Demo里面可以自己调整查看效果。为什么是这个样子呢?
    看官方解释:

    corners 
    A bitmask value that identifies the corners that you want rounded. You can use this parameter to round only a subset of the corners of the rectangle.
    一个位掩码值,用于标识要倒圆的角。 您可以使用此参数仅舍入矩形角的一个子集。
    
    cornerRadii 
    The radius of each corner oval. Values larger than half the rectangle’s width or height are clamped appropriately to half the width or height.
    每个角的半径为椭圆形。 大于矩形宽度或高度一半的值将适当地钳位为宽度或高度的一半。
    

    可以看出,里面的圆弧系统做适当的优化,在特定的时候会变的,就出现了不是完整圆的情况。
    解决方法很简单,自己画:

    - (void)setCornerWithTopLeftCorner:(CGFloat)topLeft
                        topRightCorner:(CGFloat)topRight
                      bottomLeftCorner:(CGFloat)bottemLeft
                     bottomRightCorner:(CGFloat)bottemRight
                                bounds:(CGRect)bounds {
        
        CGFloat width = bounds.size.width;
        CGFloat height = bounds.size.height;
        
        UIBezierPath *maskPath = [UIBezierPath bezierPath];
        maskPath.lineWidth = 1.0;
        maskPath.lineCapStyle = kCGLineCapRound;
        maskPath.lineJoinStyle = kCGLineJoinRound;
        [maskPath moveToPoint:CGPointMake(bottemRight, height)]; //左下角
        [maskPath addLineToPoint:CGPointMake(width - bottemRight, height)];
        
        [maskPath addQuadCurveToPoint:CGPointMake(width, height- bottemRight) controlPoint:CGPointMake(width, height)]; //右下角的圆弧
        [maskPath addLineToPoint:CGPointMake(width, topRight)]; //右边直线
        
        [maskPath addQuadCurveToPoint:CGPointMake(width - topRight, 0) controlPoint:CGPointMake(width, 0)]; //右上角圆弧
        [maskPath addLineToPoint:CGPointMake(topLeft, 0)]; //顶部直线
        
        [maskPath addQuadCurveToPoint:CGPointMake(0, topLeft) controlPoint:CGPointMake(0, 0)]; //左上角圆弧
        [maskPath addLineToPoint:CGPointMake(0, height - bottemLeft)]; //左边直线
        [maskPath addQuadCurveToPoint:CGPointMake(bottemLeft, height) controlPoint:CGPointMake(0, height)]; //左下角圆弧
    
        CAShapeLayer *maskLayer = [CAShapeLayer layer];
        maskLayer.frame = bounds;
        maskLayer.path = maskPath.CGPath;
        self.layer.mask = maskLayer;
    }
    

    效果如下:


    AddLine.gif

    后记

    总有未知的坑在等着自己,乐此不疲。

    相关文章

      网友评论

          本文标题:iOS bezierPathWithRoundedRect圆弧不

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