美文网首页
绘制视图

绘制视图

作者: luzsyn | 来源:发表于2016-11-21 21:29 被阅读22次

一直没有一个好的绘制视图的笔记,今天整理一下,分享给大家:
不多说,直接上代码。


一、核心绘图(C语言风格调用函数)

- (void)drawRect:(CGRect)rect {
     //获取上下文环境(获取画板)
    CGContextRef context = UIGraphicsGetCurrentContext(); 
     //把画笔移动到起始点 
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 250, 250);  
    CGContextAddLineToPoint(context, 150, 450);
    CGContextAddLineToPoint(context, 50, 300); 
    CGContextAddLineToPoint(context, 100, 100);   //设置描边的颜色    
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
     //描边
    CGContextStrokePath(context);
    //设置填充颜色
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
   //填充
   CGContextFillPath(context);
}

//drawRect:方法会在创建View的实例时,系统自动调用一次,绝对不可以手动调用该方法.

二、 贝塞尔曲线UIBezierPath 绘图

  • 绘制曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(150, 50)];
    [path addCurveToPoint:CGPointMake(50, 150) controlPoint1:CGPointMake(50, 50) controlPoint2:CGPointMake(150, 150)];
    [path addCurveToPoint:CGPointMake(150, 250) controlPoint1:CGPointMake(150, 150) controlPoint2:CGPointMake(50, 250)];
    [[UIColor redColor]setStroke];
    [path stroke];
  • 绘制矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 300, 200, 15)];
    path.lineWidth = 4;//描边线宽
    path.lineJoinStyle = kCGLineJoinBevel;//焦点的样式
    path.lineCapStyle = kCGLineCapSquare;//线两端的样式
    [[UIColor blueColor] setStroke];//设置描边色
    [path stroke];
  • 绘制圆角矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 330, 200, 150) cornerRadius:75];
    [path stroke];
  • 绘制椭圆
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 330, 200, 150)];
    [[UIColor greenColor] setFill];//设置填充色
    [path fill];

三、 用bezierPath绘制八卦

  CGPoint center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
  CGFloat radius = self.frame.size.width * 0.5 - 50;
  UIBezierPath *path = [UIBezierPath bezierPath];
  [path addArcWithCenter:center radius:radius startAngle:M_PI_2 * 3 endAngle:M_PI_2 clockwise:YES];  
  [path addCurveToPoint:CGPointMake(center.x , center.y - radius) controlPoint1:CGPointMake(center.x + radius , center.y) controlPoint2:CGPointMake(center.x - radius , center.y)]; 
  [[UIColor whiteColor] setStroke]; 
  [[UIColor blackColor] setFill];
  path.lineWidth = 5; 
  [path stroke];
  [path fill];
  UIBezierPath *path2 = [UIBezierPath bezierPath];
  [path2 addArcWithCenter:center radius:radius startAngle:M_PI_2  endAngle:M_PI_2* 3 clockwise:YES];  
  [path2 addCurveToPoint:CGPointMake(center.x , center.y + radius) controlPoint1:CGPointMake(center.x - radius , center.y) controlPoint2:CGPointMake(center.x + radius , center.y)];    
  [[UIColor blackColor] setStroke]; 
  [[UIColor whiteColor] setFill]; 
  path2.lineWidth = 5;
  [path2 stroke];
  [path2 fill];

四、绘制DownLoad图形

自定义UIView里的draw方法里
- (void)drawRect:(CGRect)rect {
CGPoint center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
CGFloat radius = MIN(self.frame.size.width * 0.5, self.frame.size.height * 0.5) - 4;
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath addArcWithCenter:center radius:radius startAngle:M_PI_2 * 3 endAngle:M_PI_2 * 3 + M_PI * 2 * self.progressValue clockwise:YES];
bezierPath.lineWidth = 8;
[[UIColor blueColor]setFill];
[bezierPath fill];
}

相关文章

  • 常见面试问题概括

    UI视图相关 *TableView重用机制? 答: *视图绘制原理?如何实现异步绘制? 答:UIView绘制原理 ...

  • Android-自定义View

    [1] Android如何绘制视图? 当用户将Android视图引入焦点时,Android框架会引导视图进行绘制。...

  • OpenGL ES(GLKView+GLKViewControl

    GLKView使用OpenGL ES绘制内容的视图默认实现 1:初始化视图 context 绘制视图内容时使⽤用的...

  • Android单排上王者系列之Android性能优化

    Android视图的绘制流程 Android中视图的绘制会经历三个阶段即onMeasure()、onLayout(...

  • 视图绘制

    本文要点 事件传递视图响应图像显示原理卡顿掉帧原因绘制&异步绘制离屏渲染 先看一下UIView和CALayer区别...

  • 绘制视图

    一直没有一个好的绘制视图的笔记,今天整理一下,分享给大家:不多说,直接上代码。 一、核心绘图(C语言风格调用函数)...

  • 绘制视图

    当我们想要重绘某个视图的时候,我们不能直接调用drawRect:的方法,因为该方法为系统自动调用,我们手动调用无效...

  • 视图绘制

    视图绘制是调用drawRect:方法来实现的。对于AppKit中的各种界面控件,系统默认实现了不同控件的界面绘制和...

  • # UI视图相关

    UI视图相关 UITableView 事件传递&视图响应 图像显示原理 卡顿&掉帧 绘制原理&异步绘制 离屏渲染 ...

  • Metal 基本任务和概念 - 02

    使用金属绘制视图内容 创建一个MetalKit视图和一个渲染过程以绘制视图的内容。 概述 在此示例中,您将学习使用...

网友评论

      本文标题:绘制视图

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