从圆圈或圆环画出片段

时间：2013-04-07 18:33:11

标签： ios core-animation core-graphics

我一直试图找出一种绘制线段的方法，如下图所示：

enter image description here

我想：

  1. 绘制细分
  2. 包括渐变
  3. 包含阴影
  4. 将绘图从0设置为n角度

    5. 我一直试图用CGContextAddArc和类似的电话来做这件事，但没有走得太远。

    有人可以帮忙吗？

3 个答案:

答案 0 :(得分：181)

您的问题有很多部分。

获取路径

为这样的片段创建路径不应该太难。有两个弧线和两条直线。我previously explained how you can break down a path like that所以我不会在这里做到。相反，我会想要通过抚摸另一条道路来创造路径。您当然可以阅读细分并自己构建路径。我正在谈论抚摸的弧线是灰色虚线末端内部的橙色弧线。

Path to be stroked

为了抚摸我们首先需要它的路径。这基本上就像移动到起点并在中心周围绘制一个弧从当前角度到你希望段覆盖的角度一样简单。 

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将为您提供更强大的绘图，但Core Animation将为您提供更好的动画性能。由于路径涉及纯粹的Cora动画不起作用。你最终会得到奇怪的文物。但是，我们可以通过绘制图层的图形上下文来使用图层和核心图形的组合。

填充和抚摸细分

我们已经有了基本的形状，但在我们添加渐变和阴影之前，我会做一个基本的填充和描边（你的图像中有黑色描边）。

CGContextRef c = UIGraphicsGetCurrentContext();
CGContextAddPath(c, strokedArc);
CGContextSetFillColorWithColor(c, [UIColor lightGrayColor].CGColor);
CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
CGContextDrawPath(c, kCGPathFillStroke);

这会在屏幕上显示这样的内容

Filled and stroked shape

添加阴影

我要改变顺序并在渐变之前做阴影。要绘制阴影，我们需要为上下文配置阴影，并绘制填充形状以使用阴影绘制阴影。然后我们需要恢复上下文（在阴影之前）并再次描绘形状。

CGColorRef shadowColor = [UIColor colorWithWhite:0.0 alpha:0.75].CGColor;
CGContextSaveGState(c);
CGContextSetShadowWithColor(c,
                            CGSizeMake(0, 2), // Offset
                            3.0,              // Radius
                            shadowColor);
CGContextFillPath(c);
CGContextRestoreGState(c);

// Note that filling the path "consumes it" so we add it again
CGContextAddPath(c, strokedArc);
CGContextStrokePath(c);

此时结果是这样的

enter image description here

绘制渐变

对于渐变，我们需要一个渐变层。我在这里做了一个非常简单的双色渐变，但您可以根据需要自定义它。要创建渐变，我们需要获得颜色和合适的颜色空间。然后我们可以在填充顶部绘制渐变（但在笔划之前）。我们还需要将渐变掩盖到与以前相同的路径。为此，我们剪辑路径。

CGFloat colors [] = {
    0.75, 1.0, // light gray   (fully opaque)
    0.90, 1.0  // lighter gray (fully opaque)
};

CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceGray(); // gray colors want gray color space
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);
CGColorSpaceRelease(baseSpace), baseSpace = NULL;

CGContextSaveGState(c);
CGContextAddPath(c, strokedArc);
CGContextClip(c);

CGRect boundingBox = CGPathGetBoundingBox(strokedArc);
CGPoint gradientStart = CGPointMake(0, CGRectGetMinY(boundingBox));
CGPoint gradientEnd   = CGPointMake(0, CGRectGetMaxY(boundingBox));

CGContextDrawLinearGradient(c, gradient, gradientStart, gradientEnd, 0);
CGGradientRelease(gradient), gradient = NULL;
CGContextRestoreGState(c);

这样就完成了绘图，因为我们目前有这个结果

Masked gradient

动画

当谈到形状的动画时，它有all been written before: Animating Pie Slices Using a Custom CALayer。如果您尝试通过简单地设置路径属性的动画来进行绘制，那么您将在动画期间看到一些非常时髦的路径变形。为了说明的目的，阴影和渐变保持不变，如下图所示。

Funky warping of path

我建议您使用我在此答案中发布的绘图代码，并将其用于该文章的动画代码。然后你应该得到你要求的东西。

供参考：使用Core Animation

的相同图纸

平原形状

CAShapeLayer *segment = [CAShapeLayer layer];
segment.fillColor = [UIColor lightGrayColor].CGColor;
segment.strokeColor = [UIColor blackColor].CGColor;
segment.lineWidth = 1.0;
segment.path = strokedArc;

[self.view.layer addSublayer:segment];

添加阴影

该图层具有一些与阴影相关的属性，您需要自定义这些属性。 Howerever 您应该设置shadowPath属性以提高性能。 

segment.shadowColor = [UIColor blackColor].CGColor;
segment.shadowOffset = CGSizeMake(0, 2);
segment.shadowOpacity = 0.75;
segment.shadowRadius = 3.0;
segment.shadowPath = segment.path; // Important for performance

绘制渐变

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.colors = @[(id)[UIColor colorWithWhite:0.75 alpha:1.0].CGColor,  // light gray
                    (id)[UIColor colorWithWhite:0.90 alpha:1.0].CGColor]; // lighter gray
gradient.frame = CGPathGetBoundingBox(segment.path);

如果我们现在绘制渐变，它将位于形状的顶部而不是在其内部。不，我们不能对形状进行渐变填充（我知道你在考虑它）。我们需要屏蔽渐变，使其超出细分。为此，我们创建另一个图层作为该细分的掩码。 必须另一层，文档清楚表明行为是＆＃34;未定义＆＃34;如果蒙版是图层层次结构的一部分。由于蒙版的坐标系将与渐变子层的坐标系相同，因此我们必须在设置之前平移线段形状。

CAShapeLayer *mask = [CAShapeLayer layer];
CGAffineTransform translation = CGAffineTransformMakeTranslation(-CGRectGetMinX(gradient.frame),
                                                                 -CGRectGetMinY(gradient.frame));
mask.path = CGPathCreateCopyByTransformingPath(segment.path,
                                               &translation);
gradient.mask = mask;

答案 1 :(得分：39)

Quartz 2D Programming Guide涵盖了您需要的一切。我建议你仔细研究一下。

然而，将它们放在一起可能很困难，所以我将引导您完成它。我们将编写一个函数，它接受一个大小并返回一个看起来大致像你的一个段的图像：

arc with outline, gradient, and shadow

我们开始这样的函数定义：

static UIImage *imageWithSize(CGSize size) {

我们需要一个段的厚度常数：

    static CGFloat const kThickness = 20;

和概述段的行宽度的常量：

    static CGFloat const kLineWidth = 1;

和阴影大小的常量：

    static CGFloat const kShadowWidth = 8;

接下来，我们需要创建一个用于绘制的图像上下文：

    UIGraphicsBeginImageContextWithOptions(size, NO, 0); {

我在该行的末尾放了一个左括号，因为我喜欢额外的缩进级别，以提醒我稍后再拨打UIGraphicsEndImageContext。

由于我们需要调用的很多函数是Core Graphics（又名Quartz 2D）函数，而不是UIKit函数，我们需要得到CGContext：

        CGContextRef gc = UIGraphicsGetCurrentContext();

现在我们已经准备好开始了。首先，我们在路径中添加一个弧。弧线沿着我们想要绘制的线段的中心运行：

        CGContextAddArc(gc, size.width / 2, size.height / 2,
            (size.width - kThickness - kLineWidth) / 2,
            -M_PI / 4, -3 * M_PI / 4, YES);

现在我们要求Core Graphics用一个概述路径的“描边”版本替换路径。我们首先将笔划的粗细设置为我们希望细分具有的厚度：

        CGContextSetLineWidth(gc, kThickness);

和we set the line cap style to “butt” so we'll have squared-off ends：

        CGContextSetLineCap(gc, kCGLineCapButt);

然后我们可以要求Core Graphics用一个描边版本替换路径：

        CGContextReplacePathWithStrokedPath(gc);

要使用线性渐变填充此路径，我们必须告诉Core Graphics将所有操作剪切到路径内部。这样做会使Core Graphics重置路径，但我们稍后需要路径来绘制边缘周围的黑线。所以我们将复制路径：

        CGPathRef path = CGContextCopyPath(gc);

由于我们希望片段投射阴影，我们将在进行任何绘制之前设置阴影参数：

        CGContextSetShadowWithColor(gc,
            CGSizeMake(0, kShadowWidth / 2), kShadowWidth / 2,
            [UIColor colorWithWhite:0 alpha:0.3].CGColor);

我们将填充片段（使用渐变）并抚摸它（绘制黑色轮廓）。我们想要两个操作都有一个阴影。我们通过开始透明层告诉Core Graphics：

        CGContextBeginTransparencyLayer(gc, 0); {

我在该行的末尾放了一个左括号，因为我希望有一个额外的缩进级别，以提醒我稍后再调用CGContextEndTransparencyLayer。

由于我们要更改上下文的剪辑区域以进行填充，但我们不希望在稍后描边时剪切，我们需要保存图形状态：

            CGContextSaveGState(gc); {

我在该行的末尾放了一个左括号，因为我希望有一个额外的缩进级别，以提醒我稍后再调用CGContextRestoreGState。

要使用渐变填充路径，我们需要创建一个渐变对象：

                CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
                CGGradientRef gradient = CGGradientCreateWithColors(rgb, (__bridge CFArrayRef)@[
                    (__bridge id)[UIColor grayColor].CGColor,
                    (__bridge id)[UIColor whiteColor].CGColor
                ], (CGFloat[]){ 0.0f, 1.0f });
                CGColorSpaceRelease(rgb);

我们还需要找出渐变的起点和终点。我们将使用路径边界框：

                CGRect bbox = CGContextGetPathBoundingBox(gc);
                CGPoint start = bbox.origin;
                CGPoint end = CGPointMake(CGRectGetMaxX(bbox), CGRectGetMaxY(bbox));

我们将强制水平或垂直绘制渐变，以较长者为准：

                if (bbox.size.width > bbox.size.height) {
                    end.y = start.y;
                } else {
                    end.x = start.x;
                }

现在我们终于拥有绘制渐变所需的一切。首先我们剪辑到路径：

                CGContextClip(gc);

然后我们绘制渐变：

                CGContextDrawLinearGradient(gc, gradient, start, end, 0);

然后我们可以释放渐变并恢复保存的图形状态：

                CGGradientRelease(gradient);
            } CGContextRestoreGState(gc);

当我们调用CGContextClip时，Core Graphics会重置上下文的路径。该路径不是已保存图形状态的一部分;这就是我们之前制作副本的原因。现在是时候使用该副本再次在上下文中设置路径：

            CGContextAddPath(gc, path);
            CGPathRelease(path);

现在我们可以描绘路径，绘制线段的黑色轮廓：

            CGContextSetLineWidth(gc, kLineWidth);
            CGContextSetLineJoin(gc, kCGLineJoinMiter);
            [[UIColor blackColor] setStroke];
            CGContextStrokePath(gc);

接下来，我们告诉Core Graphics结束透明层。这将使我们看到我们绘制的内容并在下面添加阴影：

        } CGContextEndTransparencyLayer(gc);

现在我们都完成了绘画。我们要求UIKit从图像上下文创建UIImage，然后销毁上下文并返回图像：

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

您可以一起找到所有代码in this gist。

答案 2 :(得分：4)

这是Rob Mayoff回答的 Swift 3 版本。看看这种语言的效率有多高！这可能是MView.swift文件的内容：

import UIKit

class MView: UIView {

    var size = CGSize.zero

    override init(frame: CGRect) {
    super.init(frame: frame)
    size = frame.size
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    var niceImage: UIImage {

        let kThickness = CGFloat(20)
        let kLineWidth = CGFloat(1)
        let kShadowWidth = CGFloat(8)

        UIGraphicsBeginImageContextWithOptions(size, false, 0)

            let gc = UIGraphicsGetCurrentContext()!
            gc.addArc(center: CGPoint(x: size.width/2, y: size.height/2),
                   radius: (size.width - kThickness - kLineWidth)/2,
                   startAngle: -45°,
                   endAngle: -135°,
                   clockwise: true)

            gc.setLineWidth(kThickness)
            gc.setLineCap(.butt)
            gc.replacePathWithStrokedPath()

            let path = gc.path!

            gc.setShadow(
                offset: CGSize(width: 0, height: kShadowWidth/2),
                blur: kShadowWidth/2,
                color: UIColor.gray.cgColor
            )

            gc.beginTransparencyLayer(auxiliaryInfo: nil)

                gc.saveGState()

                    let rgb = CGColorSpaceCreateDeviceRGB()

                    let gradient = CGGradient(
                        colorsSpace: rgb,
                        colors: [UIColor.gray.cgColor, UIColor.white.cgColor] as CFArray,
                        locations: [CGFloat(0), CGFloat(1)])!

                    let bbox = path.boundingBox
                    let startP = bbox.origin
                    var endP = CGPoint(x: bbox.maxX, y: bbox.maxY);
                    if (bbox.size.width > bbox.size.height) {
                        endP.y = startP.y
                    } else {
                        endP.x = startP.x
                    }

                    gc.clip()

                    gc.drawLinearGradient(gradient, start: startP, end: endP,
                                          options: CGGradientDrawingOptions(rawValue: 0))

                gc.restoreGState()

                gc.addPath(path)

                gc.setLineWidth(kLineWidth)
                gc.setLineJoin(.miter)
                UIColor.black.setStroke()
                gc.strokePath()

            gc.endTransparencyLayer()


        let image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }

    override func draw(_ rect: CGRect) {
        niceImage.draw(at:.zero)
    }
}

从viewController中调用它，如下所示：

let vi = MView(frame: self.view.bounds)
self.view.addSubview(vi)

为了对弧度转换进行度数，我创建了°后缀运算符。所以你现在可以使用，例如 45°，这可以实现45度到弧度的转换。 这个例子适用于Ints，如果你有需要，也可以为Float类型扩展它们：

postfix operator °

protocol IntegerInitializable: ExpressibleByIntegerLiteral {
  init (_: Int)
}

extension Int: IntegerInitializable {
  postfix public static func °(lhs: Int) -> CGFloat {
    return CGFloat(lhs) * .pi / 180
  }
}

将此代码放入实用程序swift文件中。

相关问题
最新问题