如何使用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:内的核心图形或使用CAShapeLayer的核心动画执行此操作。选择一个，不要在它们之间：）

核心图形

使用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];