APP开发 > 新体验 > 设计沙龙 > 技术调研
  • 使用 UIBezierPath 进行简单的图形绘制

    adinnet/2017年4月19日/技术调研

    这篇文章介绍UIBezierPath的详细的使用, 以及一些细节!

    创建一个XTBezierPath继承于UIView的类 使用drawRect 完成图形的绘制

    在drawRect方法完成绘制 使用 moveToPointaddLineToPoint两个方法绘制一个任意多边形 其中w, h 代表自定义View的宽, 高 代码如下:

                // 初始化一个UIBezierPath对象.
               UIBezierPath *bPath = [UIBezierPath bezierPath];            // 线宽.            bPath.lineWidth = 10;
               // 拐点处理.            bPath.lineCapStyle = kCGLineCapRound;
               // 终点处理.            bPath.lineJoinStyle = kCGLineCapRound;
               // 添加线上的点.
               [bPath moveToPoint:CGPointMake(w / 2, 0.0)];
               [bPath addLineToPoint:CGPointMake(w, h / 2)];
               [bPath addLineToPoint:CGPointMake(w / 2, h)];
               [bPath addLineToPoint:CGPointMake(0.0, h / 2)];
               [bPath closePath];
               // 填充内部颜色.
               // 绘制线.
               [bPath stroke];


    任意多边形

    绘制一个矩形, 直接使用bezierPathWithRect这个方法

                // 创建矩形.
               UIBezierPath *bPath = [UIBezierPath bezierPathWithRect:CGRectMake(30, 30, w - 60, h - 60)];
               bPath.lineWidth = 10;
               [bPath stroke];


    矩形

    绘制内切曲线, 直接使用这个方法bezierPathWithOvalInRect

                 // 这个方法, 是做一个内切曲线.
               // 圆形就是宽高相等.
               UIBezierPath *bPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(5, 5, w - 10, h - 100)];
               bPath.lineWidth = 10;
               [bPath stroke];


    内切曲线

    绘制一条弧线, bezierPathWithArcCenter这个方法

                UIBezierPath *bPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:130 startAngle:0 endAngle:M_PI_2 clockwise:YES];            bPath.lineWidth = 10;
               [bPath stroke];


    弧线

    绘制二次贝塞尔曲线,moveToPointaddQuadCurveToPoint这两个搭配使用


    原理图

                // 二次贝塞尔曲线的支持.
               UIBezierPath *bPath = [UIBezierPath bezierPath];            // 开始的点.
               [bPath moveToPoint:CGPointMake(0, h)];
               // 终止点, 控制点.
               [bPath addQuadCurveToPoint:CGPointMake(w, h) controlPoint:CGPointMake(0, 0)];
               [bPath fill];


    贝塞尔曲线

    绘制三次贝塞尔曲线, moveToPointaddCurveToPoint


    原理图

    // 三次贝塞尔曲线
               UIBezierPath *bPath = [UIBezierPath bezierPath];            [bPath moveToPoint:CGPointMake(0, h / 2)];
               [bPath addCurveToPoint:CGPointMake(w, h / 2) controlPoint1:CGPointMake(w / 2, 0) controlPoint2:CGPointMake(w / 2, h)];
               bPath.lineWidth = 10;
               [bPath stroke];


    贝塞尔曲线

    UIBezierPath类只是CGPathRef数据类型和path绘图属性的一个封装, 我们可以用来直接修改底层的path, 通过CGMutablePathRef, 1. 完全的使用Core Graphics函数去修改path

    #if 0
               CGMutablePathRef cgPath = CGPathCreateMutable();            CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(0, 0, 300, 300));            CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(50, 50, 200, 200));            // Now create the UIBezierPath object
               UIBezierPath* bPath = [UIBezierPath bezierPath];
               bPath.CGPath = cgPath;
               bPath.usesEvenOddFillRule = YES;
               bPath.lineWidth = 5;            // After assigning it to the UIBezierPath object, you can release
               // your CGPathRef data type safely.
               [bPath stroke];            CGPathRelease(cgPath);#endif// 2.搭配使用 UIBezierPath类拥有自己底层的CGPathRef data type, 所以需要使用一个副本来修改, 之后再赋值#if 1
               UIBezierPath *bPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 300, 300)];            // Get the CGPathRef and create a mutable version.
               CGPathRef cgPath = bPath.CGPath;            CGMutablePathRef  mutablePath = CGPathCreateMutableCopy(cgPath);            // Modify the path and assign it back to the UIBezierPath object
               CGPathAddEllipseInRect(mutablePath, NULL, CGRectMake(50, 50, 200, 200));
               bPath.CGPath = mutablePath;            // Release both the mutable copy of the path.
               bPath.lineWidth = 5;
               [[UIColor purpleColor] set];
               [bPath stroke];            CGPathRelease(mutablePath);#endif


    效果图

    绘制一个圆, 同时画一个边框

                // Create an oval shape to draw.
               UIBezierPath *bPath = [UIBezierPath bezierPathWithOvalInRect:                                   CGRectMake(0, 0, 200, 200)];            // Set the render colors
               [[UIColor lightGrayColor] setStroke];
               [[UIColor greenColor] setFill];            CGContextRef aRef = UIGraphicsGetCurrentContext();            // If you have content to draw after the shape,
               // save the current state before changing the transform
               //CGContextSaveGState(aRef);

               // Adjust the view's origin temporarily. The oval is
               // now drawn relative to the new origin point.
               CGContextTranslateCTM(aRef, 50, 50);            // Adjust the drawing options as needed.
               bPath.lineWidth = 5;            // Fill the path before stroking it so that the fill
               // color does not obscure the stroked line.
               [bPath fill];
               [bPath stroke];


    效果图

    总结 : UIBezierPath 使用这个就可以完成多种演示的图形了.

    文章摘录链接 :http://www.jianshu.com/p/492e770433ee

上一篇:浅谈APP首页弹框形式和价值下一篇:LOGO变形记!当我们在讨论品牌标识时,我们在讨论什么?
400-021-8655
在线留言