设置View的半边圆角效果
lqisrv68
8年前
<h3><strong>设置View的一边圆角</strong></h3> <ul> <li> <p>效果如图</p> </li> </ul> <p><img src="https://simg.open-open.com/show/3185754b33666d387ac88739966a26d1.png"></p> <p>半圆角</p> <ul> <li> <p>实现方式 : <strong>UIBezierPath</strong> <strong>CAShapeLayer</strong></p> </li> <li> <p>核心方法:</p> </li> </ul> <pre> <code class="language-objectivec">+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii</code></pre> <ul> <li> <p>基本思路:</p> <ol> <li> <p>通过贝塞尔曲线画一条半边圆角的路径</p> </li> <li> <p>将该路径作为CAShapeLayer的path</p> </li> <li> <p>将该CAShapeLayer作为视图的mask</p> </li> </ol> </li> </ul> <p>通过贝塞尔曲线画一条半边圆角的路径</p> <pre> <code class="language-objectivec">+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii</code></pre> <p>该方法会接受三个参数</p> <ul> <li> <p>rect : 传控件的bounds</p> </li> <li> <p>corners : 圆角的位置 ,该值为枚举类型。指定圆角的位置,可以分别设置左上 、左下、右上、右下。并且可以同时指定,如左上和左下,即示例图中半边圆角效果 。 UIRectCornerBottomRight : 右下角 ...</p> </li> <li> <p>cornerRadii : 圆角大小</p> </li> </ul> <h3><strong>eg:</strong></h3> <pre> <code class="language-objectivec">// 获取一条曲线。曲线路径为(0,0,96,50).圆角位置为右上和右下,圆角大小为25 UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 96, 50) byRoundingCorners:UIRectCornerTopRight | UIRectCornerBottomRight cornerRadii:CGSizeMake(25, 25)]; // 初始化一个CAShapeLayer CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = CGRectMake(0, 0, 96, 50); // 将曲线路径设置为layer的路径 maskLayer.path = path.CGPath; // 设置控件的mask为CAShapeLayer self.checkButton.layer.mask = maskLayer;</code></pre> <p> </p> <p>来自:http://www.jianshu.com/p/ec4df8dce57f</p> <p> </p>