如何使用 UIBezierPath 创建形状

Question

我想使用 UIBezier Path 实现图像中显示的形状，并且图像中的形状也充满了块，它显示一个块已填充，如何实现。

我已经尝试了以下取自here的代码

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 10)];
[path addQuadCurveToPoint:CGPointMake(200, 10) controlPoint:CGPointMake(100, 5)];
[path addLineToPoint:CGPointMake(200, 0)];
[path addLineToPoint:CGPointMake(0, 0)];
[path closePath];

谢谢。

Answer 1

在我看来，轮廓和每个块都具有相同的形状。您可能会做的是为轮廓制作一个形状并对其进行描边，并为每个单元格制作一个形状并填充它。

创建形状

每个形状都可以像这样创建（正如我之前在this answer 中解释的那样）。这是通过抚摸一条路径（橙色弧线）完成的，这是一条从一个角度到另一个角度的简单弧线，以获得另一条路径（虚线轮廓）

在我们可以绘制路径之前，我们要创建它。 CGPath 的工作方式与 UIBezierPath 类似，但使用了 C API。首先我们移动到起点，然后我们添加一个弧围绕中心从一个角度到另一个角度。

CGMutablePathRef arc = CGPathCreateMutable();
CGPathMoveToPoint(arc, NULL,
                  startPoint.x, startPoint.y);
CGPathAddArc(arc, NULL,
             centerPoint.x, centerPoint.y,
             radius,
             startAngle,
             endAngle,
             YES);

现在我们有了居中的弧线，我们可以通过以一定宽度抚摸它来创建一个形状路径。生成的路径将有两条直线（因为我们指定了“对接”线帽样式）和两条弧线（内部和外部）。正如您在上图中看到的，笔划从中心向内和向外的距离相等。

CGFloat lineWidth = 10.0;
CGPathRef strokedArc =
    CGPathCreateCopyByStrokingPath(arc, NULL,
                                   lineWidth,
                                   kCGLineCapButt,
                                   kCGLineJoinMiter, // the default
                                   10); // 10 is default miter limit

您将这样做几次，为描边轮廓创建一条路径，为每个单元格创建一条路径。

绘制形状

根据它是轮廓还是单元格，您可以对其进行描边或填充。您可以使用drawRect: 中的Core Graphics 或使用CAShapeLayers 使用Core Animation 来执行此操作。选择一个，不要在它们之间:)

核心图形

使用 Core Graphics（在 drawRect: 内）时，您会获得图形上下文，在其上配置颜色，然后描边路径。例如，具有灰色填充颜色和黑色描边颜色的轮廓如下所示：

我知道你的形状是用浅蓝色笔触填充的白色（或者可能是清晰的），但我已经有一个灰色和黑色的图像，我不想创建一个新的 ;)

CGContextRef c = UIGraphicsGetCurrentContext();
CGContextAddPath(c, strokedArc); // the path we created above
CGContextSetFillColorWithColor(c, [UIColor lightGrayColor].CGColor);
CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
CGContextDrawPath(c, kCGPathFillStroke); // both fill and stroke

这会在屏幕上显示类似的内容

核心动画

同样的绘图可以用这样的形状层来完成：

CAShapeLayer *outline = [CAShapeLayer layer];
outline.fillColor = [UIColor lightGrayColor].CGColor;
outline.strokeColor = [UIColor blackColor].CGColor;
outline.lineWidth = 1.0;
outline.path = strokedArc; // the path we created above

[self.view.layer addSublayer: outline];