ios - 如何使用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:内的Cor​​e Graphics或使用 CAShapeLayer的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];