《Quartz 2D编程指南》中介绍了您需要的所有内容。我建议您仔细阅读。
但是，将所有内容放在一起可能很困难，因此我将带您逐步了解。我们将编写一个函数，该函数具有一个大小并返回一个大致类似于您的细分受众群之一的图像：
我们开始这样的函数定义：
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);
并将线帽样式设置为“对接”，因此我们将获得平方的两端：
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);
现在我们都完成了绘图。我们要求UIKitUIImage从图像上下文创建一个，然后销毁上下文并返回图像：
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
您可以在本要点中找到所有代码。
