繪製組給點之間的貝塞爾曲線

Question

什麼是繪製貝塞爾曲線，在iOS應用，通過一組給定點的通過最好的方式，

Answer 1

您可以輕鬆谷歌如何創建一些示例貝塞爾曲線在網上。我發現這個簡短的tut就是一個例子。

您可以創建一個接近的貝塞爾曲線，例如，用下面的代碼片段：

UIBezierPath* path = [UIBezierPath bezierPath]; 

[path moveToPoint:pt1]; 
[path addLineToPoint:pt2]; 
[path addLineToPoint:pt3]; 

[path closePath]; 

我希望這會有助於作爲一個起點。

Answer 2

UIBezierPath *aPath = [UIBezierPath bezierPath]; 

// Set the starting point of the shape. 
[aPath moveToPoint:CGPointMake(100.0, 0.0)]; 

// Draw the lines. 
[aPath addLineToPoint:CGPointMake(200.0, 40.0)]; 
[aPath addLineToPoint:CGPointMake(160, 140)]; 
[aPath addLineToPoint:CGPointMake(40.0, 140)]; 
[aPath addLineToPoint:CGPointMake(0.0, 40.0)]; 
[aPath closePath]; 

Answer 3

請試試這個。

UIImageView *waterLevel = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,200,200)]; 
UIGraphicsBeginImageContext(waterLevel.frame.size); 
[waterLevel.image drawAtPoint:CGPointZero]; 
//define BezierPath 
UIBezierPath *bezierPath = [UIBezierPath bezierPath]; 


// Set the starting point of the shape. 
[bezierPath moveToPoint:CGPointMake(0, 0)]; 

[bezierPath addLineToPoint:CGPointMake(waterLevel.frame.size.width, 0)]; 
[bezierPath addLineToPoint:CGPointMake(waterLevel.frame.size.width, waterLevel.frame.size.height)]; 
[bezierPath addLineToPoint:CGPointMake(0, waterLevel.frame.size.height)]; 
[bezierPath closePath]; 

bezierPath.lineWidth = 15; 
//set the stoke color 
[[UIColor blackColor] setStroke]; 
//draw the path 
[bezierPath stroke]; 

// Add to the current Graphic context 
CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextAddPath(context,bezierPath.CGPath); 
waterLevel.image = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

[self.view addSubview:waterLevel]; 

Answer 4

我知道這可能會很晚，但只適用於正在尋找正確答案的任何人。而不是使用addLineToPoint繪製直線。您可以使用addCurveToPoint繪製曲線。例如

[bezierPath moveToPoint:CGPointMake(0, 0)]; 
[bezierPath addCurveToPoint:CGPointMake(40, 100) 
       controlPoint1:CGPointMake(20, 0) 
       controlPoint2:CGPointMake(20, 100)]; 
[bezierPath addCurveToPoint:CGPointMake(80, 50) 
       controlPoint1:CGPointMake(60, 100) 
       controlPoint2:CGPointMake(60, 50)]; 

// and you may don't want to close the path 
// [bezierPath closePath]; 

這真的取決於您選擇曲線的控制點。我只是使用x = last_point_x + 20;對於控制點1，y = last_point_y，並且x = current_point_x_20; y = current_point_y;

並且您可能希望使用其他值而不是20，因爲您可能具有不同的曲線段寬度。

Answer 5

你可以通過使用CGPointFromString方法有效得多：

NSArray *pointArray = @[@"{3.0,2.5}",@"{100.0,30.2}", @"{100.0,200.0}", @"{3.0,200.0}"]; 

// draw the path 
UIBezierPath *aPath = [UIBezierPath bezierPath]; 
for (NSString *pointString in pointArray) { 
    if ([pointArray indexOfObject:pointString] == 0) 
     [aPath moveToPoint:CGPointFromString(pointString)]; 
    else 
     [aPath addLineToPoint:CGPointFromString(pointString)]; 
} 
[aPath closePath]; 

Answer 6

一點更通用的方法來做到這一點可以通過以下方式實現，例如，望着BEMSimpleLineGraph GitHub Project（在這裏看到更多的信息： bemsimplelinegraph）。在這裏我提取了一個方法，通過給定的點列表繪製貝塞爾曲線。

頭文件（BezierLine.h）：

#import <Foundation/Foundation.h> 
#import <UIKit/UIKit.h> 
#import <CoreGraphics/CoreGraphics.h> 

@interface BezierLine : NSObject 

/* 
Draws a bezier curved line on the given context 
with points: Array of CGPoint values 
*/ 
-(void) drawBezierCurveInContext:(CGContextRef)context withPoints:(NSArray*)points lineColor:(UIColor*)color lineWidth:(CGFloat)lineWidth; 

@end 

實施（BezierLine.m）：

#import "BezierLine.h" 

@implementation BezierLine 

-(void) drawBezierCurveInContext:(CGContextRef)context withPoints:(NSArray*)points lineColor:(UIColor*)color lineWidth:(CGFloat)lineWidth { 
    if (points.count < 2) return; 

    CGPoint CP1; 
    CGPoint CP2; 

    // LINE 
    UIBezierPath *line = [UIBezierPath bezierPath]; 

    CGPoint p0; 
    CGPoint p1; 
    CGPoint p2; 
    CGPoint p3; 
    CGFloat tensionBezier1 = 0.3; 
    CGFloat tensionBezier2 = 0.3; 

    CGPoint previousPoint1; 
    CGPoint previousPoint2; 

    [line moveToPoint:[[points objectAtIndex:0] CGPointValue]]; 

    for (int i = 0; i < points.count - 1; i++) { 
     p1 = [[points objectAtIndex:i] CGPointValue]; 
     p2 = [[points objectAtIndex:i + 1] CGPointValue]; 

     const CGFloat maxTension = 1.0f/3.0f; 
     tensionBezier1 = maxTension; 
     tensionBezier2 = maxTension; 

     if (i > 0) { // Exception for first line because there is no previous point 
      p0 = previousPoint1; 
      if (p2.y - p1.y == p1.y - p0.y) tensionBezier1 = 0; 
     } else { 
      tensionBezier1 = 0; 
      p0 = p1; 
     } 

     if (i < points.count - 2) { // Exception for last line because there is no next point 
      p3 = [[points objectAtIndex:i + 2] CGPointValue]; 
      if (p3.y - p2.y == p2.y - p1.y) tensionBezier2 = 0; 
     } else { 
      p3 = p2; 
      tensionBezier2 = 0; 
     } 

     // The tension should never exceed 0.3 
     if (tensionBezier1 > maxTension) tensionBezier1 = maxTension; 
     if (tensionBezier2 > maxTension) tensionBezier2 = maxTension; 

     // First control point 
     CP1 = CGPointMake(p1.x + (p2.x - p1.x)/3, 
          p1.y - (p1.y - p2.y)/3 - (p0.y - p1.y)*tensionBezier1); 

     // Second control point 
     CP2 = CGPointMake(p1.x + 2*(p2.x - p1.x)/3, 
          (p1.y - 2*(p1.y - p2.y)/3) + (p2.y - p3.y)*tensionBezier2); 


     [line addCurveToPoint:p2 controlPoint1:CP1 controlPoint2:CP2]; 

     previousPoint1 = p1; 
     previousPoint2 = p2; 
    } 

    CGContextSetAllowsAntialiasing(context, YES); 
    CGContextSetStrokeColorWithColor(context, color.CGColor); 
    CGContextSetLineWidth(context, lineWidth); 
    CGContextAddPath(context, line.CGPath); 
    CGContextDrawPath(context, kCGPathStroke); 
} 


@end 

可以通過例如使用創建一個UIGraphicsBeginImageContext圖像上下文和檢索使用它UIGraphicsGetCurrentContext（）的上下文。

否則，您可能需要更改代碼並將得到的路徑指定給CALayer並將其添加到UIView。

希望這會有所幫助。