iOS绘图

ios阶段
算法
回调
多态（观察者模式）把多态真正明白上一大台阶
程序设计
设计模式
if else少出

• 创建UIBezierPath 对象
  LineView.m

#import "LineView.h"
@implementation LineView
//在View创建时会自动执行 我们不能自己去调用它
- (void)drawRect:(CGRect)rect {
    // 创建UIBezierPath 对象
    UIBezierPath *path = [UIBezierPath bezierPath];
    //勾勒图形
    [path moveToPoint:CGPointMake(40, 40)];
    [path addLineToPoint:CGPointMake(40, 140)];
    [path addLineToPoint:CGPointMake(140, 140)];
    [path addLineToPoint:CGPointMake(140, 40)];
    //[path addLineToPoint:CGPointMake(40, 40)];
    //闭合
    //[path closePath];
    //设置 描边 或填充的颜色
    [[UIColor redColor] setStroke];
    [[UIColor greenColor]setFill];
    //设置描边宽度
    path.lineWidth = 20;
    //设置焦点样式
//    kCGLineJoinMiter,//默认 直角的
//    kCGLineJoinRound,//圆角
//    kCGLineJoinBevel//平角
    path.lineJoinStyle = kCGLineJoinMiter;
    //设置线俩端的样式
//    kCGLineCapButt,//默认 平的
//    kCGLineCapRound,//多一个半圆的
//    kCGLineCapSquare//多一个方的
    path.lineCapStyle = kCGLineCapRound;
    //进行描边 和 填充
    [path stroke];
    [path fill];
}

ArcView.m

#import "ArcView.h"
@interface ArcView()
@end
@implementation ArcView

- (void)drawRect:(CGRect)rect {
    CGPoint center =  CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArcWithCenter:center radius:100
                startAngle:M_PI_2 * 3 endAngle:0 clockwise:YES];
    [path addLineToPoint:center];
    [path closePath];
    [path moveToPoint:CGPointMake(center.x, center.y +100)];
    [path addArcWithCenter:center radius:100
                startAngle:M_PI_2  endAngle:M_PI clockwise:YES];
    [path addLineToPoint:center];
    [path closePath];
    path.lineWidth = 5;
    [[UIColor redColor] setStroke];
    [[UIColor redColor]setFill];
    //[path stroke];
    [path fill];
}

ViewController.m

#import "ViewController.h"
#import "LineView.h"
#import "ArcView.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ArcView *arvView;

@end

@implementation ViewController
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    self.arvView.transform = CGAffineTransformRotate(self.arvView.transform, M_PI_4);
}

• 进度条练习
  DrawView.m

#import "DrawView.h"
@implementation DrawView
-(void)setProgressValue:(CGFloat)progressValue{
      _progressValue = progressValue;
    //通知view重绘 也就是让view 再次调用view中的drawRect方法
    [self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPath];
    //
    [path addArcWithCenter:CGPointMake(200, 100) radius:80 startAngle:M_PI_2 *3 endAngle:M_PI_2 *3 + (M_PI * 2 *self.progressValue)  clockwise:YES];//相当于 （M_PI * 2 *1）表示一圈 如果加的是 M_PI * 2 *0.8）表示0.8圈
    path.lineWidth = 5;
    [[UIColor redColor]setStroke];
    [path stroke];
    UIBezierPath *path2= [UIBezierPath bezierPath];
    [path2 moveToPoint:CGPointMake(100, 200)];
    [path2 addLineToPoint:CGPointMake(350, 200)];
    [path2 addLineToPoint:CGPointMake(350, 240)];
    [path2 addLineToPoint:CGPointMake(100, 240)];
    [path2 closePath];
    path2.lineWidth = 5;
    [[UIColor blueColor]setStroke];
    [path2 stroke];
    UIBezierPath *path3= [UIBezierPath bezierPath];
    [path3 moveToPoint:CGPointMake(105, 205)];
    [path3 addLineToPoint:CGPointMake(105+240 * self.progressValue, 205)];
    [path3 addLineToPoint:CGPointMake(105+240 * self.progressValue, 235)];
    [path3 addLineToPoint:CGPointMake(105, 235)];
    [path3 closePath];
    [[UIColor greenColor]setFill];
    [path3 fill];
}
UIBezierPath *path4 = [UIBezierPath bezierPath];
    [path4 addArcWithCenter:CGPointMake(200, 500) radius:80 startAngle:M_PI_2 - M_PI *self.progressValue endAngle:M_PI_2 + (M_PI * self.progressValue)  clockwise:YES];
    path4.lineWidth = 5;
    [[UIColor redColor]setFill];
    [path4 fill];

ViewController.m

#import "ViewController.h"
#import "DrawView.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet DrawView *drawView;
@property (weak, nonatomic) IBOutlet UISlider *slider;

@end

@implementation ViewController
- (IBAction)valueChanged:(UISlider *)sender {
  self.drawView.progressValue = sender.value;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.drawView.progressValue = self.slider.value;
}

屏幕效果

image.png