使用贝塞尔曲线绘制螺旋线

Question

这适用于iPad应用程序,但它本质上是一个数学问题.

我需要绘制一个变化(单调增加)线宽的圆弧.在曲线的开始处,它将具有起始厚度(假设为2pts),然后厚度将平滑地增加直到弧的末端,其将处于其最大厚度(假设为12pts).

我认为最好的方法是创建一个UIBezierPath并填充形状.我的第一次尝试是使用两个圆弧(带有偏移中心),并且工作精细到90°,但弧度通常在90°和180°之间,因此接近不会切割它.

我目前的方法是使用贝塞尔四边形或三次曲线制作一个轻微螺旋(一个从圆弧略微增长,一个略微收缩).问题是我在哪里放置控制点,以便与圆弧(也就是形状"厚度")的偏差是我想要的值.

约束:

• 形状必须能够以任意角度(彼此相差180°)开始和结束
• 形状的"厚度"(与圆的偏差)必须以给定值开始和结束
• "厚度"必须单调增加(它不能再变大,然后再变小)
• 它必须看起来光滑,不会有任何急剧弯曲

我也对其他解决方案持开放态度.

Answer 1

我的方法只是构造2个圆弧并填充其间的区域.棘手的一点是弄清楚这些弧的中心和半径.如果厚度不是太大,看起来相当不错.(剪切并粘贴并自行决定是否满足您的需求.)可以通过使用剪切路径来改进.

- (void)drawRect:(CGRect)rect
{
  CGContextRef context = UIGraphicsGetCurrentContext();

  CGMutablePathRef path = CGPathCreateMutable();

  // As appropriate for iOS, the code below assumes a coordinate system with
  // the x-axis pointing to the right and the y-axis pointing down (flipped from the standard Cartesian convention).
  // Therefore, 0 degrees = East, 90 degrees = South, 180 degrees = West,
  // -90 degrees = 270 degrees = North (once again, flipped from the standard Cartesian convention).
  CGFloat startingAngle = 90.0;  // South
  CGFloat endingAngle = -45.0;   // North-East
  BOOL weGoFromTheStartingAngleToTheEndingAngleInACounterClockwiseDirection = YES;  // change this to NO if necessary

  CGFloat startingThickness = 2.0;
  CGFloat endingThickness = 12.0;

  CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
  CGFloat meanRadius = 0.9 * fminf(self.bounds.size.width / 2.0, self.bounds.size.height / 2.0);

  // the parameters above should be supplied by the user
  // the parameters below are derived from the parameters supplied above

  CGFloat deltaAngle = fabsf(endingAngle - startingAngle);

  // projectedEndingThickness is the ending thickness we would have if the two arcs
  // subtended an angle of 180 degrees at their respective centers instead of deltaAngle
  CGFloat projectedEndingThickness = startingThickness + (endingThickness - startingThickness) * (180.0 / deltaAngle);

  CGFloat centerOffset = (projectedEndingThickness - startingThickness) / 4.0;
  CGPoint centerForInnerArc = CGPointMake(center.x + centerOffset * cos(startingAngle * M_PI / 180.0),
                                          center.y + centerOffset * sin(startingAngle * M_PI / 180.0));
  CGPoint centerForOuterArc = CGPointMake(center.x - centerOffset * cos(startingAngle * M_PI / 180.0),
                                          center.y - centerOffset * sin(startingAngle * M_PI / 180.0));

  CGFloat radiusForInnerArc = meanRadius - (startingThickness + projectedEndingThickness) / 4.0;
  CGFloat radiusForOuterArc = meanRadius + (startingThickness + projectedEndingThickness) / 4.0;

  CGPathAddArc(path,
               NULL,
               centerForInnerArc.x,
               centerForInnerArc.y,
               radiusForInnerArc,
               endingAngle * (M_PI / 180.0),
               startingAngle * (M_PI / 180.0),
               !weGoFromTheStartingAngleToTheEndingAngleInACounterClockwiseDirection
               );

  CGPathAddArc(path,
               NULL,
               centerForOuterArc.x,
               centerForOuterArc.y,
               radiusForOuterArc,
               startingAngle * (M_PI / 180.0),
               endingAngle * (M_PI / 180.0),
               weGoFromTheStartingAngleToTheEndingAngleInACounterClockwiseDirection
               );

  CGContextAddPath(context, path);

  CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
  CGContextFillPath(context);

  CGPathRelease(path);  
}