iOS给同一个view设置四个不同的圆角

参考文章:https://blog.csdn.net/Enjolras1024/article/details/51981966

该文章讲述了整个绘制圆角的所有逻辑,本篇文章主要讲述一下,关于网上查到的绘制圆角的代码中存在的问题。

通过百度可以查到如下代码

当你将该代码复制使用后会发现,底部的两个角并没有切成圆角,而是向内凹的一个形状。而造成该问题的主要原因是:clockwise:false。

这里可以填写两个参数 :YES or NO。 在文章起始的参考文章中有该参数的讲解,NO是逆时针,YES是顺时针。


通过代码我们可以看到,画右下角的时候,从0PI开始,到0.5PI结束,之后逆时针去切割,就会出现向内绘制的问题。所以对于底部的两个角,我们应该是顺时针绘制切割。以下便是正确的代码

- (void)setCornerRadiusWithTopLeft:(CGFloat)topLeft topRight:(CGFloat)topRight bottomLeft:(CGFloat)bottomLeft bottomRight:(CGFloat)bottomRight{

        CGFloat minX = CGRectGetMinX(self.bounds);

        CGFloat minY = CGRectGetMinY(self.bounds);

        CGFloat maxX = CGRectGetMaxX(self.bounds);

        CGFloat maxY = CGRectGetMaxY(self.bounds);


        CGFloattopLeftCenterX = minX + topLeft;

        CGFloattopLeftCenterY = minY + topLeft;

        CGFloattopRightCenterX = maxX - topRight;

        CGFloattopRightCenterY = minY + topRight;

        CGFloatbottomLeftCenterX = minX + bottomLeft;

        CGFloatbottomLeftCenterY = maxY - bottomLeft;

        CGFloatbottomRightCenterX = maxX - bottomRight;

        CGFloatbottomRightCenterY = maxY - bottomRight;


        UIBezierPath *path = [UIBezierPath bezierPath];

        [pathaddArcWithCenter:CGPointMake(topLeftCenterX, topLeftCenterY) radius:topLeft startAngle:M_PI endAngle:3 * M_PI / 2.0 clockwise:YES];

        [pathaddArcWithCenter:CGPointMake(topRightCenterX, topRightCenterY)radius:topRightstartAngle:3*M_PI/2.0endAngle:0clockwise:YES];

        [pathaddArcWithCenter:CGPointMake(bottomRightCenterX, bottomRightCenterY)radius:bottomRightstartAngle:0endAngle:M_PI_2clockwise:YES];

        [pathaddArcWithCenter:CGPointMake(bottomLeftCenterX, bottomLeftCenterY)radius:bottomLeftstartAngle:M_PI_2endAngle:M_PIclockwise:YES];

        CAShapeLayer *masklayer = [[CAShapeLayer alloc]init];

        masklayer.frame=self.bounds;

        masklayer.path= path.CGPath;

        self.layer.mask= masklayer;

}

#define M_PI        3.14159265358979323846264338327950288  /* pi            */

#define M_PI_2      1.57079632679489661923132169163975144  /* pi/2          */

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容