빠 른 시작 IOS UIBezierPath(베 어 셀 곡선)
9110 단어 uibezierpath
사용 방법
UIBezierPath 는 CGPathRef 에 대한 패키지 입 니 다.벡터 그래 픽 을 만 들 때 하나 이상 의 라인 으로 분해 하고 연결 하면 모든 라인 의 종점 은 다음 라인 의 출발점 입 니 다.
구체 적 으로:
1.UIBezierPath 대상 만 들 기
2.moveTopoint:초기 선분 의 시작 점 설정
3.선분 을 추가 하고 하나 이상 의 키 경 로 를 정의 합 니 다.
4.UIBezierPath 의 그림 과 관련 된 속성 을 수정 합 니 다.예 를 들 어 stroke path 의 속성 line Width 와 lineJointyle,filled path 의 속성 uses EvenoddFillRule 등 입 니 다.
주의:직사각형 이나 원 같은 특수 도형 이 라면 두 번 째 단 계 를 사용 하지 않 아 도 됩 니 다.
코드 사례
직선 을 긋다
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(100, 50)];
path.lineWidth = 5.0f;
path.lineJoinStyle = kCGLineJoinRound;
[path stroke];

삼각형 만 들 기
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(300, 50)];
[path addLineToPoint:CGPointMake(200, 150)];
// closePath , -addLineToPoint:
// [path addLineToPoint:CGPointMake(50, 50)];
[path closePath];
path.lineWidth = 5.0f;
[path stroke];

사각형 만 들 기
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 100, 50, 50)];
path.lineWidth = 5.0f;
[path stroke];

내 접 곡선 만 들 기
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 50, 50)];
path.lineWidth = 5.0f;
[path stroke];

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 50, 100)];
path.lineWidth = 5.0f;
[path stroke];

원 각 이 있 는 사각형 을 만 듭 니 다.사각형 이 정원 으로 변 할 때 Radius 는 더 이상 작용 하지 않 습 니 다.
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 300, 50, 50) cornerRadius:15.0f];
path.lineWidth = 5.0f;
[path stroke];

특정한 각 을 원 각 으로 설정 한 사각형
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 400, 50, 50) byRoundingCorners:UIRectCornerBottomLeft cornerRadii:CGSizeMake(5,5)];
path.lineWidth = 5.0f;
[path stroke];

원호 만 들 기
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 550) radius:25 startAngle:0 endAngle:1.5*M_PI clockwise:YES];
path.lineWidth = 5.0f;
[path stroke];

경로 A 로 경로 B 만 들 기
UIBezierPath *path_A = [UIBezierPath bezierPath];
[path_A moveToPoint:CGPointMake(200, 50)];
[path_A addLineToPoint:CGPointMake(250, 100)];
path_A.lineWidth = 5.0f;
UIBezierPath *path_B = [UIBezierPath bezierPathWithCGPath:path_A.CGPath];
[path_B stroke];

베 세 르 곡선 세 번 만 들 기
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100, 200)];
[path addCurveToPoint:CGPointMake(300, 200) controlPoint1:CGPointMake(150, 150) controlPoint2:CGPointMake(250, 250)];
[path stroke];

2 차 베 세 르 곡선 만 들 기
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100, 200)];
[path addQuadCurveToPoint:CGPointMake(300, 200) controlPoint:CGPointMake(150, 150)];
[path stroke];

원호 추가
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(200, 400)];
[path addLineToPoint:CGPointMake(225, 410)];
[path addArcWithCenter:CGPointMake(200, 400) radius:25 startAngle:0 endAngle:1.5*M_PI clockwise:YES];
// [path closePath];
// [path removeAllPoints];
[path stroke];

추가 경로
UIBezierPath *path_A = [UIBezierPath bezierPath];
[path_A moveToPoint:CGPointMake(200, 500)];
[path_A addLineToPoint:CGPointMake(225, 410)];
UIBezierPath *path_B = [UIBezierPath bezierPath];
[path_B moveToPoint:CGPointMake(200, 600)];
[path_B addLineToPoint:CGPointMake(225, 500)];
[path_A appendPath:path_B];
[path_A stroke];

뒤 집기 경 로 를 만 듭 니 다.즉,출발점 이 종점 이 되 고 종점 이 출발점 이 됩 니 다.
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(100, 50)];
path.lineWidth = 5.0f;
NSLog(@"%@",NSStringFromCGPoint(path.currentPoint));
UIBezierPath *path_b = [path bezierPathByReversingPath];
CGAffineTransform transform = CGAffineTransformMakeTranslation(200, 0);
[path_b applyTransform: transform];
// self.center
[path addLineToPoint: CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)];
[path_b addLineToPoint: CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)];
NSLog(@"%@",NSStringFromCGPoint(path_b.currentPoint));
[[UIColor redColor] set];
[path stroke];
[[UIColor blueColor] set];
[path_b stroke];

경로 모방 변환
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100, 50)];
[path addLineToPoint:CGPointMake(200, 50)];
CGAffineTransform transform = CGAffineTransformRotate(self.transform, M_PI_4);
[path applyTransform:transform];
path.lineWidth = 5.0f;
[path stroke];

점선 만 들 기
CGFloat dashStyle[] = {1.0f, 2.0f};
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(100, 50)];
[path setLineDash:dashStyle count:2 phase:0.0];
[path stroke];

색상 설정
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor greenColor] setStroke];
[[UIColor redColor] setFill];
[path stroke];
[path fill];

테두리 혼합 모드 설정
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor greenColor] setStroke];
path.lineWidth = 10.0f;
[path strokeWithBlendMode:kCGBlendModeSaturation alpha:1.0];
[path stroke];

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor redColor] setFill];
[path fillWithBlendMode:kCGBlendModeSaturation alpha:0.6];
[path fill];

현재 그래 픽 컨 텍스트 의 그래 픽 영역 을 수정 하면 알 수 있 습 니 다.그 다음 의 그래 픽 작업 으로 인해 나타 나 는 내용 은 지정 한 경로 의 충전 구역 에서 만 발생 합 니 다.
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
[[UIColor greenColor] setStroke];
[path addClip];
[path stroke];

결어
UIBezierPath 에 대한 간단 한 소 개 는 여기까지 입 니 다.주로 코드 로 보 여 주 었 습 니 다.속성 과 방법 에 대해 자세히 소개 하지 않 았 습 니 다.저 는 애플 의 api 가 쓴 것 을 직접 볼 수 있 는 것 도 분명 하 다 고 생각 합 니 다.아니면 서로 다른 매개 변수 스타일 을 시도 해 보 는 것 도 대충 이해 할 수 있 습 니 다.
핵심 애니메이션 과 베 셀 곡선 에 대해 간단 한 소 개 를 했 습 니 다.그 다음 에 간단 한 사용자 정의 애니메이션 을 만 들 수 있 습 니 다.
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!