iOS UIBezierPath 예제 - 그림 그리기

iOS UIBezierPath 예제 - 그림 그리기

 

 

선분 그리기

 

 

MyView.h

 

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface MyView : UIView

@end

NS_ASSUME_NONNULL_END

 

 

MyView.m

 

#import "MyView.h"

@implementation MyView



- (void)drawRect:(CGRect)rect {
    // Drawing code
    NSLog(@"drawRect 호출됨.");
    
    //1.UIBezierPath 객체 생성
    UIBezierPath *path = [[UIBezierPath alloc]init];
    
    
    //2.UIBezierPath 객체관련 속성 설정
    path.lineWidth = 4;
    path.lineJoinStyle = kCGLineJoinMiter; //선과 선이 이어지는 부분 효과
    path.usesEvenOddFillRule = TRUE;
    path.lineCapStyle = kCGLineCapSquare; //제일 마지막 선분의 끝점 효과
    path.miterLimit = PIPE_BUF;
    
    //2는 첫번째 선분의 길이, 10은 첫번째 선분의 간격, 3은 두번째 선분의 길이, 7은 두번째 선분의 간격.
    CGFloat pattern [] = {2, 10 , 3 , 7};
    NSInteger count = sizeof(pattern)/sizeof(pattern[0]);
    [path setLineDash:pattern count:count phase:5];
    
    
    
    //3.moveToPoint 메소드를 사용해서 초기 세그먼트의 시작점을 설정
    [path moveToPoint:CGPointMake(0, 0)];
    
    
    //4.선과 곡선 선분을 추가하여 subpath를 정의
    [path addLineToPoint:CGPointMake(100, 200)];
    
    
    //4-1. 선분 추가
    [path addLineToPoint:CGPointMake(100, 50)];
    
    [path addLineToPoint:CGPointMake(120, 50)];
    
    //5. 선택적으로(Optionally), closePath를 호출하여 subpath를 닫기.
    //closePath 는 마지막 선분 지점에서 첫번째 선분지점까지 직선 선분을 그린다.
    //첫번째 점인 (0, 0)과  마지막으로 addLine해준 point인 (40, 50) 지점을 이어준다.
    // [path closePath];
    
    
    //6. 선택적으로, 3, 4, 5 단계를 반복하여 추가 subpath를 정의하면된다.
    
    
    
    //7.bezier path의 geometry와 attributes를 구성한 뒤에,
    //stroke() 및 fill()메소드를 사용하여 현재 그래픽 컨텍스트에서 path를 그려준다..
    [[UIColor systemBlueColor] set];
    [path stroke];
}


@end

 

 

삼각형 그리기

 

Three.h

 

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface Three : UIView

@end

NS_ASSUME_NONNULL_END

 

Three.m

 

#import "Three.h"

@implementation Three


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
   
    
    //삼각형 그리기
    
    //1.UIBezierPath 객체 생성
    UIBezierPath *path = [[UIBezierPath alloc]init];
      
      
    //2.UIBezierPath 객체관련 속성 설정
    path.lineWidth = 4;


    //3.moveToPoint 메소드를 사용해서 초기 세그먼트의 시작점을 설정
    [path moveToPoint:CGPointMake(self.frame.size.width / 2, 0)];
    
    
    //4.선과 곡선 선분을 추가하여 subpath를 정의
    [path addLineToPoint:CGPointMake(0, self.frame.size.height)];
    
    
    //4-1. 선분 추가
    [path addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];
    
    
    //5.첫번재 선분과 마지막 선분을 이어준다.
    [path closePath];
    
    //노란색
    [[UIColor systemPinkColor] set];

     //6.전체 채워주기
     [path fill];

    
    
    [[UIColor systemBlueColor] set];
     //stroke()는 path의 outline만 추적한다
     [path stroke];


}


@end

 

 

원그리기

 

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface circle : UIView

@end

NS_ASSUME_NONNULL_END

 

 

#import "circle.h"

@implementation circle


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    
     //원 그리기
    
     //1.UIBezierPath 객체 생성
    
     //반원..
     UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height / 2)];
      
     
     //둥근모서리 사각형 - (cornerRadius 50으로 주면 타원이 됨)
     path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:10];
    
    
    //호
     path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect)) radius:75 startAngle:0 endAngle:(135 * M_PI) / 180 clockwise:NO];
    
    
     //2.UIBezierPath 객체관련 속성 설정
     path.lineWidth = 2;


     //핑크
     [[UIColor systemPinkColor] set];

     //6.전체 채워주기
     [path fill];

    
     //선분 색
     [[UIColor systemBlueColor] set];
     //stroke()는 path의 outline만 추적한다
     [path stroke];
}


@end

 

 

사용하기

 

    
//    MyView *view = [[MyView alloc]initWithFrame:CGRectMake(50, 200, 300, 300)];
//    view.backgroundColor = [UIColor grayColor];
//    [self.view addSubview:view];
    
    
//    Three *view = [[Three alloc]initWithFrame:CGRectMake(50, 200, 300, 300)];
//    view.backgroundColor = [UIColor grayColor];
//    [self.view addSubview:view];
    
    
    circle *view = [[circle alloc]initWithFrame:CGRectMake(50, 200, 300, 300)];
    view.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view];
    
}

 

 

bezier.zip

0.06MB

 

참고

https://zeddios.tistory.com/359

https://zeddios.tistory.com/814

https://zeddios.tistory.com/821

https://zeddios.tistory.com/822