如何在iOS中使用bezier路径创建新月？

Question

如果笔画和填充是可配置的，如何使用贝塞尔曲线路径绘制封闭的新月？所以汽车我可以获得一次曲线但是没有找到连接和绘制另一条曲线的策略。

Answer 1

如果你想要更接近天文学上正确的月牙（外弧为180度），我可能会建议：

CGFloat angle = M_PI_2 * 0.60;      // how much of a crescent do you want (must be less than M_PI_2 and greater than zero)

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:TRUE];
[path addArcWithCenter:CGPointMake(center.x - radius * tan(angle), center.y) radius:radius / cosf(angle) startAngle:M_PI_2 - angle endAngle:angle - M_PI_2 clockwise:FALSE];
[path closePath];

产量：

如您所见，路径基本上由两个圆弧定义，一个是圆弧，一个是逆时针。内弧，半径以及内弧的起始和终止角度的细节是基本三角函数的问题（但实际公式将根据精确的期望外观和感觉而变化）。例如，在我的代码片段中，上面代码中的angle是下图中的蓝色角度，然后我计算出红色三角形，用于确定正确的起点和终点角度以及内部的中心弧。

下面，有人询问如何将此逆时针旋转90度，如：

在Swift中，那将是：

let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: -.pi, endAngle: 0, clockwise: true)
path.addArc(withCenter: CGPoint(x: center.x, y: center.y + radius * tan(angle)), radius: radius / cos(angle), startAngle: -angle, endAngle: -.pi + angle, clockwise: false)
path.close()

Answer 2

bezier路径可以由两个弧构成。在swift：

var big = UIBezierPath()
var angle: CGFloat = 5.0 // in radians
var rad  : CGFloat = 50.0
big.addArcWithCenter(CGPointMake(0.0, 0.0), radius: rad, startAngle:-angle/2.0, endAngle: angle/2.0, clockwise: true)
big.addArcWithCenter(CGPointMake(rad * cos(angle/2.0), 0.0), radius: rad * sin(angle/2.0), startAngle: 3.14/2.0, endAngle: -3.14/2.0, clockwise: false)
big.closePath()

将创建一个绘制时的路径：

编辑：Objective-C，填充和描边，左上角为x，y = 100,100）：

UIBezierPath *big = [UIBezierPath new];
CGFloat angle = 5.0; // in radians
CGFloat rad   = 50.0;
CGFloat x=  100.0;
CGFloat y = 100.0;

[big addArcWithCenter:CGPointMake(x, y) radius:rad startAngle:-angle/2.0 endAngle:angle/2.0 clockwise:YES];

[big addArcWithCenter:CGPointMake(x + rad * cos(angle/2.0), y) radius: rad * sin(angle/2.0) startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:NO];


big.lineWidth = 2.0;
[[UIColor lightGrayColor] setFill];
[[UIColor darkGrayColor] setStroke];

[big closePath];
[big fill];
[big stroke];

Answer 3

对于复杂的形状绘图，我可以建议一个名为PaintCode的优秀应用程序。有了它，您可以导入矢量图形并获取以bezierPath形式格式化的相关路径。有试用版。以下是将提供的形状转换为SVG文件后的结果：

<?php
$output = shell_exec('./ffmpeg');
echo "<pre>$output</pre>";
?>

结果：