美文网首页
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圆弧不

    世界一直在变化,结果由我们来决定。 前言 圆角是UI设计钟爱的一种美化方式,iOS里面实现圆角的方式有很多种,不再...

  • ios 画圆弧

  • IOS 绘制圆弧

    UIBezierPath*bezierPath = [UIBezierPathbezierPath]; //M_P...

  • iOS - 虚线圆弧

  • IOS绘制圆弧

    绘制圆弧 就是一个圆形的一部分只需掌握方法的各个参数的含义。 掌握CGContextAddArc参数的各个含义。C...

  • UIBezierPath ios版简单应用

    1、可以用来画遮罩。自定义圆角 + (instancetype)bezierPathWithRoundedRect...

  • iOS 的颜色渐变圆弧

    iOS 的颜色渐变 实现一个圆弧进度条主要分为三步 一、画圆弧这里用的贝赛尔曲线,就是这个东西:UIBezierP...

  • iOS开发圆弧菜单

    前面写过一篇关于圆弧菜单的文章,但是那篇文章里介绍的方法太简单粗暴,并不适合大数据量的载入。后来又通过UIColl...

  • 第十一章

    一、PickerView 1、PickerView是什么 仿iOS的PickerView控件,带有3D圆弧效果,并...

  • ios绘图基础

    ios常见的图形绘制 画线 画圆、圆弧 画矩形,画椭圆,多边形 画图片 画文字 1:ios绘图基础 几个基本的概念...

网友评论

      本文标题:iOS bezierPathWithRoundedRect圆弧不

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