如何使用UIBezier Path创建形状

Question

我希望使用UIBezier Path实现图像中显示的形状,并且图像中的块填充了形状,它显示了一个块被填充,如何实现这一点.

我从这里尝试了以下代码

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

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

创建形状

每个形状都可以这样创建(正如我之前在这个答案中解释的那样).它是通过抚摸一条路径(橙色圆弧)来完成的,这条路径是从一个角度到另一个角度的简单弧形,以获得另一条路径(虚线轮廓)

在我们开始创建它的路径之前.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

您可以这样做几次,为描边轮廓创建一条路径,为每个单元格创建一条路径.

绘制形状

根据它是轮廓还是单元格,您可以将其描边或填充它.您可以使用内部的Core Graphics drawRect:或使用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];