UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。 一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。 下面我们看下, UIBezierPath类的头文件里定义的方法有哪些: UIBezierPath类头文件定义 + (instancetype)bezierPath; /** * 根据一个Rect 画一个椭圆曲线 - (void)appendPath:(UIBezierPath *)bezierPath; // Modified paths // 创建 并返回一个与当前路径相反的新的贝塞尔路径对象 - (UIBezierPath 使用UIBezierPath绘图,必须要在一个UIView 的子类试图中的drawRect:方法中实现。
(贝塞尔曲线扫盲) 贝塞尔曲线对应iOS中是UIBezierPath对象,它是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。 3.简单的使用 使用CAShapeLayer和UIBezierPath画一条直线和一个椭圆形,效果如下: ? 使用贝塞尔曲线画直线和椭圆形 代码如下: // 1,绘制一条直线 UIBezierPath * path = [[UIBezierPath alloc] init]; path.lineWidth *)getStarOneBezierPath { // draw star UIBezierPath * starPath = [UIBezierPath bezierPath]; *)getStarTwoBezierPath { // draw star UIBezierPath * starPath = [UIBezierPath bezierPath];
当需要画图时我们一般创建一个UIView子类, 重写其中的drawRect方法 再drawRect方法中利用UIBezierPath添加画图 UIBezierPath的使用方法: (1)创建一个Bezier UIBezierPath *apath = ({ UIBezierPath *path = [UIBezierPath bezierPath]; path.lineWidth UIBezierPath *apath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 40, 200, 100)]; / UIBezierPath *apath = ({ UIBezierPath *path = [UIBezierPath bezierPath]; path.lineWidth UIBezierPath *apath = ({ UIBezierPath *path = [UIBezierPath bezierPath]; path.lineWidth
说来简单,就是用矢量设计工具舒舒服服的做好设计,然后输出成 svg 格式,再用 NSXMLParser 去读出来,转换成 UIBezierPath ,然后就天高任鸟飞~ 清晰起见,这里不使用各种库,由上面的二维码动画为例 rectLayer.fillColor = UIColor.darkGrayColor().CGColor rectLayer.strokeColor = nil rectLayer.path = UIBezierPath rectLayer.fillColor = UIColor.darkGrayColor().CGColor rectLayer.strokeColor = nil rectLayer.path = UIBezierPath
先上效果图: CALayer系列.gif CGContextRef、UIBezierPath、文本属性Attributes.gif 一、CAEmitterLayer 粒子属性 //设置发射器 CAEmitterLayer ,取值为NSTextAttachment对象,常用于文字图片混排 */ 还有CAReplicatorLayer、CAShapeLayer、CATextLayer、CGContextRef、UIBezierPath
MOAnnularProgressView { CAShapeLayer *backgroundLayer; // 背景图层 CAShapeLayer *frontFillLayer; // 填充图层 UIBezierPath *backgroundPath; // 背景贝赛尔曲线 UIBezierPath *frontFillPath; // 填充贝赛尔曲线 } - (instancetype)initWithFrame CGFloat width = self.bounds.size.width; backgroundLayer.frame = self.bounds; backgroundPath = [UIBezierPath progress = MAX(MIN(progress, 1.0), 0.0); CGFloat width = self.bounds.size.width; frontFillPath = [UIBezierPath
} setCornerOnTop:方法的实现 #pragma mark - Corner Radius - (void)setCornerOnTop:(CGFloat)radius { UIBezierPath *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds maskPath.CGPath; self.layer.mask = maskLayer; } - (void)setCornerOnBottom:(CGFloat)radius { UIBezierPath maskPath.CGPath; self.layer.mask = maskLayer; } - (void)setCornerOnLeft:(CGFloat)radius { UIBezierPath maskPath.CGPath; self.layer.mask = maskLayer; } - (void)setCornerOnRight:(CGFloat)radius { UIBezierPath
} setCornerOnTop:方法的实现 #pragma mark - Corner Radius - (void)setCornerOnTop:(CGFloat)radius { UIBezierPath *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds maskPath.CGPath; self.layer.mask = maskLayer; } - (void)setCornerOnBottom:(CGFloat)radius { UIBezierPath maskPath.CGPath; self.layer.mask = maskLayer; } - (void)setCornerOnLeft:(CGFloat)radius { UIBezierPath maskPath.CGPath; self.layer.mask = maskLayer; } - (void)setCornerOnRight:(CGFloat)radius { UIBezierPath
*maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners: *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners: *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners: *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners: *maskPath; maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:10.0]
之前讲过使用UIBezierPath在UIView的drawRect中绘图, 今天我们讲下另外一种方式: CAShaperLayer 先说说使用CAShapeLayer的优点: GPU执行, GPU执行 另外,如下图所示,整个圆形UIBezierPath其实是分为多个子路径绘制的 strokeEnd 是轮廓终点的属性,取值范围[0,1]。 比如hud这个, 我们之前用UIBezierPath在UIView的DrawRect中画画过, 相对比较简单 我们用CAShapeLayer事实看。 UIBezierPath * circleP = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 80, 80)]; //内部弧路径 UIBezierPath * interP = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50
*path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 20, 70, 130)]; [path stroke]; //方形 UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(10, 200, 10, 50)]; [path1 stroke]; //圆角方形 UIBezierPath *path2 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100 , 30, 100, 100) cornerRadius:10]; [path2 stroke]; //一个角圆角 UIBezierPath *path3 = [UIBezierPath *path4 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(130, 230) radius:70 startAngle:0 endAngle
使用CAShapeLayer 和 UIBezierPath,可以实现动态绘制的动画效果。 初始化 UIBezierPath 供CAShapeLayer 使用; 使用 for循环再绘制余下的每一个圆点,确保每一个圆点都在 CAShapeLayer 的上层, 同时对UIBezierPath 设置一个 UIBezierPath 绘制好路径赋值给 CAShapeLayer即可。 使用UIBezierPath绘制扇形 在我这篇文章中我说过:UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics - (void)drawRect:(CGRect)rect { UIBezierPath *arcPath = [UIBezierPath bezierPath]; [arcPath moveToPoint
*path = [UIBezierPath bezierPath]; 67 //3、开始画起点 68 [path moveToPoint:CGPointMake(10, 10)]; CGContextAddPath(ctr, path2.CGPath); 183 //圆角方形 184 UIBezierPath *path3 = [UIBezierPath bezierPathWithRoundedRect CGContextAddPath(ctr, path4.CGPath); 189 //设置某一个角圆形 190 UIBezierPath *path5 = [UIBezierPath bezierPathWithRoundedRect (ctr, path2.CGPath); 360 UIBezierPath *path3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake( 80, 333, 10, 25)]; 361 CGContextAddPath(ctr, path3.CGPath); 362 UIBezierPath *path4 = [UIBezierPath
②、创建有占位视图的UITextView,主要涉及NSTextStorage、NSLayoutManager、NSTextContainer、UIBezierPath几个类,主要代码如下: NSString 抠取容器UITextView的两个部分 CGRect btnRect = CGRectMake((self.view.frame.size.width - 16)/ 2 - 15,10,40,40); UIBezierPath *newPath = [UIBezierPath bezierPathWithRect:btnRect]; CGRect imageRect = CGRectMake(0,0,20 + 4,20 + 2); //贝塞尔 UIBezierPath *newPath1 = [UIBezierPath bezierPathWithRect:imageRect]; textContainer.exclusionPaths
比较复杂的动画则考虑是否用UIBezierpath一帧帧来画 今天我们模仿做一个场景切换加载等待动画, 比如这样的 ? 我们分析下这张图的构成 #1. 一个灰色的背景 #2. 一个白色的圆环 #3. 一个闭合的圆弧(白色部分) 看起来不是简单的位移动画了, 我们用UIBezierPath加CADisplayLink一帧一帧来画试试看 灰色的背景, 这个比较简单, 我们直接创建一个UIView子类, 背景颜色设置为灰色 白色的圆环, 可以用UIBezierPath直接画一个圆,注意调整线的宽度 So easy //添加外圆 UIBezierPath *apath = [UIBezierPath *path = [UIBezierPath bezierPath]; //设置线条 path.lineWidth = 5; path.lineCapStyle *apath = [UIBezierPath bezierPath]; apath.lineWidth = 5; [apath addArcWithCenter:CGPointMake
第一种方法:重新设置起点,添加一根线到某个点,一个UIBezierPath路径上面可以有多条线. //设置矩形路径 path UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 100, 50, 50)]; //设置边框颜色 还是使用UIBezierPath的自带的初始化方法。 //逆时针画一个半圆 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(125, 125) radius:100 startAngle:0 endAngle:M_PI clockwise:NO]; [path stroke]; //4分之1圆孤 UIBezierPath *path = [UIBezierPath
, 创建并且返回一个新的 UIBezierPath 对象 + (instancetype)bezierPathWithOvalInRect:(CGRect)rect; 圆角矩形, 创建并且返回一个新的 对象 + (instancetype) bezierPathWithCGPath:(CGPathRef)CGPath; //CGPath是UIBezierPath的一个只读属性,通常获取一个UIBezierPath 对象中的所有点, 效果也就等同于删除了所有子路经 - (void)removeAllPoints; 将指定 UIBezierPath 中的内容添加到当前 UIBezierPath 对象中 - ( void)appendPath:(UIBezierPath *)bezierPath; //该方法将会在当前 UIBezierPath 对象的路径中追加 UIBezierPath的属性 CGPath * 如果当前路径为空, 那么该属性的值将会是 CGPointZero */ lineWidth -> /** * 线宽属性定义了 `UIBezierPath` 对象中绘制的曲线规格.
NSMutableArray *array = [NSMutableArray arrayWithObjects:@(point_1),@(point_2),@(point_3), nil]; UIBezierPath *path = [[UIBezierPath alloc] init]; [path moveToPoint:[[array firstObject] CGPointValue]]; shapeLayer addAnimation:animation forKey:NSStringFromSelector(@selector(strokeEnd))]; 5、效果 二、平滑曲线 UIBezierPath * aPath = [UIBezierPath bezierPath]; aPath.lineWidth = 5.0; aPath.lineCapStyle = kCGLineCapRound
imgV.frame = CGRectMake(100, 100, 100, 100); [self.view addSubview:imgV]; // 优化方案1: (推荐使用) CAShapeLayer UIBezierPath 结合, 可设置单个圆角 UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imgV.bounds byRoundingCorners // 说明: AShapeLayer动画渲染直接提交到手机的GPU当中,相较于view的drawRect方法使用CPU渲染而言,其效率极高,能大大优化内存使用情况 // 优化方案2: 使用贝塞尔曲线UIBezierPath - width, imgFrame.origin.y - width, imgFrame.size.width + 2*width, imgFrame.size.height + 2*width); UIBezierPath *path = [UIBezierPath bezierPathWithRect:shadowFrame]; imgV.layer.shadowPath = path.CGPath; // 使用异步进行
为正方形,设置圆角半径为边长的一半可实现圆效果 self.cornerView.layer.cornerRadius = 20.0; 但是如果需求是只要左上和右上圆角以上方法肯定不能实现,直接上代码 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:self.cornerView.bounds byRoundingCorners:UIRectCornerTopLeft bezierPath.CGPath; // 将shapeLayer设置为cornerView的layer的mask self.cornerView.layer.mask = shapeLayer; 实现四个圆角 // 绘制4个角, UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:self.cornerView.bounds cornerRadius:20.0]; CAShapeLayer