2012-05-01 4 views
5

UIBezierPath를 사용하여 프로그래밍 방식으로 별, 햇살 및 기타 "뾰족한"효과를 만드는 방법을 찾고 있습니다.iPhone iOS 별, 햇살 또는 다각형 UIBezierPath 프로그래밍 방식으로 생성

Starburst image

UIBezierPath *sunbeamsPath = [UIBezierPath bezierPath]; 
[sunbeamsPath moveToPoint: CGPointMake(x, y)]; 

경로가 중복없이 프로그래밍 모양처럼 햇살에 포인트를 생성 할 수있는 알고리즘이 있습니까?

는 또한 아래와 같은 불규칙한 모양의 햇살에 관심이 있어요 :

irregular sunburst

나는 광선의 특정 번호를 걸릴 것 같은 알고리즘은 다음 대략 숫자에 원을 나눌 것을 상상

시계 방향으로 세그먼트에 대한 점을 생성합니다. 이미 설명하고있는 것과 같은 알고리즘이 이미 존재합니까? 아니면 혼자서 작성해야합니까?

감사합니다.

답변

6

나는이 오래된 것을 알고 있지만이 질문의 첫 부분에 대해 궁금해하고 jrturton의 게시물을보고, 중심에서 UIBezierPath를 생성하는 사용자 지정 UIView를 만들었습니다. 심지어는 보너스 포인트를 위해 회전 애니메이션.

enter image description here

내가 사용하는 코드는 여기에 있습니다 : : 여기 결과입니다

- (void)drawRect:(CGRect)rect { 
CGFloat radius = rect.size.width/2.0f; 

[self.fillColor setFill]; 
[self.strokeColor setStroke]; 

UIBezierPath *bezierPath = [UIBezierPath bezierPath]; 
CGPoint centerPoint = CGPointMake(rect.origin.x + radius, rect.origin.y + radius); 

CGPoint thisPoint = CGPointMake(centerPoint.x + radius, centerPoint.y); 
[bezierPath moveToPoint:centerPoint]; 

CGFloat thisAngle = 0.0f; 
CGFloat sliceDegrees = 360.0f/self.beams/2.0f; 

for (int i = 0; i < self.beams; i++) { 

    CGFloat x = radius * cosf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.x; 
    CGFloat y = radius * sinf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.y; 
    thisPoint = CGPointMake(x, y); 
    [bezierPath addLineToPoint:thisPoint]; 
    thisAngle += sliceDegrees; 

    CGFloat x2 = radius * cosf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.x; 
    CGFloat y2 = radius * sinf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.y; 
    thisPoint = CGPointMake(x2, y2); 
    [bezierPath addLineToPoint:thisPoint]; 
    [bezierPath addLineToPoint:centerPoint]; 
    thisAngle += sliceDegrees; 

} 

[bezierPath closePath]; 

bezierPath.lineWidth = 1; 
[bezierPath fill]; 
[bezierPath stroke]; 

}

그리고 당신은 여기에 샘플 프로젝트를 다운로드 할 수 있습니다

https://github.com/meekapps/Sunburst

2

나는 이것들을 생성하는 알고리즘을 알지 못한다. 그러나 조언을 해준다. (0,0)이 태양 폭발의 중심이되는 베 지어 경로를 만든 다음 하나를 그리는 데 필요한 많은 점을 정의한다. (0,0)

다음으로 원하는만큼의 빔을 반복 재생합니다. 회전 변환 (2 pl/빔 수)을 태양 광선 포인트에 적용합니다. (CGPointApplyTransform), 경로에 추가하십시오.

끝나면 그림의 경로를 번역하고 크기를 조정할 수 있습니다.

저는 최근에 비슷한 방법으로 별 모양의 다각형을 그렸습니다. 매우 간단했습니다. 아이디어에 대한 책은 Rob Napier's입니다.

0

신속한 버전

import UIKit 

extension Int { 
    var degreesToRadians: Double { return Double(self) * .pi/180 } 
    var radiansToDegrees: Double { return Double(self) * 180/.pi } 
} 
extension FloatingPoint { 
    var degreesToRadians: Self { return self * .pi/180 } 
    var radiansToDegrees: Self { return self * 180/.pi } 
} 

class SunBurstView: UIView { 

    override func draw(_ rect: CGRect) { 
     let radius: CGFloat = rect.size.width/2.0 
     UIColor.red.setFill() 
     UIColor.blue.setStroke() 
     let bezierPath = UIBezierPath() 
     let centerPoint = CGPoint(x: rect.origin.x + radius, y: rect.origin.y + radius) 
     var thisPoint = CGPoint(x: centerPoint.x + radius, y: centerPoint.y) 
     bezierPath.move(to: centerPoint) 
     var thisAngle: CGFloat = 0.0 
     let sliceDegrees: CGFloat = 360.0/self.beams/2.0 

     for _ in 0..<self.beams { 
      let x = radius * CGFloat(cosf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.x 
      let y = radius * CGFloat(sinf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.y 
      thisPoint = CGPoint(x: x, y: y) 
      bezierPath.addLine(to: thisPoint) 
      thisAngle += sliceDegrees 
      let x2 = radius * CGFloat(cosf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.x 
      let y2 = radius * CGFloat(sinf(Float((thisAngle + sliceDegrees).degreesToRadians))) + centerPoint.y 
      thisPoint = CGPoint(x: x2, y: y2) 
      bezierPath.addLine(to: thisPoint) 
      bezierPath.addLine(to: centerPoint) 
      thisAngle += sliceDegrees 
     } 
     bezierPath.close() 
     bezierPath.lineWidth = 1 
     bezierPath.fill() 
     bezierPath.stroke() 
    } 

} 
관련 문제