2012-05-01 45 views
5

我正在尋找一種使用UIBezierPath以編程方式創建恆星,旭日形狀和其他「尖刻」效果的方法。iPhone iOS以編程方式生成星,旭日形或多邊形UIBezierPath

Starburst image

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

是否有可以生成用於像形狀編程旭日點的任何算法,沒有路徑重疊?

我也有興趣在不規則形狀旭日像下面的一個:

irregular sunburst

我可以想象這樣的算法將需要一定數目的射線,然後大致劃分圓在若干的段並且以順時針方向爲這樣的段生成點。像我描述的那種算法是否已經存在,還是我必須自己寫一個算法?

謝謝!

回答

6

我知道這個老,但我很好奇自己的這個問題的第一部分,並關閉jrturton的帖子,我創建了一個自定義的UIView,從視圖中心生成一個UIBezier路徑。即使動畫旋轉獲得獎勵積分。下面是結果:

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

我不知道創建這些的算法,但我確實有一些建議 - 創建您的bezier路徑,使得(0,0)是sunburst的中心,然後定義您需要繪製的許多點(0,0)

然後,對於任意數量的光束,執行循環:將旋轉變換(2π/光束數)應用到您的陽光點(CGPointApplyTransform),並將它們添加到路徑中。

一旦你完成了,你可以翻譯和縮放繪製的路徑。

我最近使用了一個類似的過程繪製星形多邊形,它非常簡單。感謝Rob Napier's這本書。

0

Swift version

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() 
    } 

}