使用 Quartz 2D / Core Graphics 完成此绘图的最佳方法是什么？

Question

作为我的应用程序中视图之一的背景，我想在其框架内绘制一个相当简单的矩形边框。 这本质上是一个矩形渐变：框架周围的黑线，大约 10-20 像素处渐变为白色。不幸的是，据我所知，Core Graphics 不提供矩形渐变（无论是使用 CGGradient< /code> 或 CGShading）。 所以我想知道最好的方法是什么。

我想到的有两个：

1. 绘制一系列同心矩形，每个后续矩形的颜色较浅，并在每边插入 1px。 我想不出更简单的方法，但我必须自己完成所有梯度计算，并且可能需要大量图形操作。
2. 在线性模式下使用CGGradient，每边一次。 但为了实现这一点，我想我需要首先为每一侧设置一个梯形剪切区域，以便渐变在拐角处斜接。

似乎应该有一种方法可以使用路径描边来做到这一点，但似乎没有一种方法可以定义两侧方向不同的模式。

Answer 1

我会选择选项#2：

在线性模式下使用 CGGradient，每边一次。 但为了实现这一点，我想我需要首先为每一侧设置一个梯形剪切区域，以便渐变在拐角处斜接。

使用 NSBezierPath 创建梯形区域相当简单，您只需执行四次绘制操作。

以下是创建左侧梯形区域的基本代码：

NSRect outer = [self bounds];
NSPoint outerPoint[4];
outerPoint[0] = NSMakePoint(0, 0);
outerPoint[1] = NSMakePoint(0, outer.size.height);
outerPoint[2] = NSMakePoint(outer.size.width, outer.size.height);
outerPoint[3] = NSMakePoint(outer.size.width, 0);

NSRect inner = NSInsetRect([self bounds], borderSize, borderSize);
NSPoint innerPoint[4];
innerPoint[0] = inner.origin;
innerPoint[1] = NSMakePoint(inner.origin.x,
                            inner.origin.y + inner.size.height);
innerPoint[2] = NSMakePoint(inner.origin.x + inner.size.width,
                            inner.origin.y + inner.size.height);
innerPoint[3] = NSMakePoint(inner.origin.x + inner.size.width,
                            inner.origin.y);

NSBezierPath leftSidePath = [[NSBezierPath bezierPath] retain];
[leftSidePath moveToPoint:outerPoint[0]];
[leftSidePath lineToPoint:outerPoint[1]];
[leftSidePath lineToPoint:innerPoint[1]];
[leftSidePath lineToPoint:innerPoint[0]];
[leftSidePath lineToPoint:outerPoint[0]];

// ... etc.

[leftSidePath release];

Answer 2

像这样的东西也可以工作。
基本上：不使用剪切路径，只需使用混合模式。
在此示例中，渐变被缓存在 CGLayer 中。

 CGContextRef ctx = UIGraphicsGetCurrentContext();
 CGColorSpaceRef cspace = CGColorSpaceCreateDeviceRGB();

 CGContextSetRGBFillColor(ctx, 1.0, 1.0, 1.0, 1.0);
 CGContextFillRect(ctx,self.bounds);

 CGFloat w = self.bounds.size.width;
 CGFloat h = self.bounds.size.height;
 CGFloat dh = (w-h)/2;

 CGLayerRef l = CGLayerCreateWithContext(ctx,CGSizeMake(h,48.0f),NULL);
 CGContextRef lctx = CGLayerGetContext(l);

 float comp[] = { .2,.5,1.0,1.0,1.0,1.0,1.0,1.0};
 CGGradientRef gradient = CGGradientCreateWithColorComponents(cspace, comp, NULL, 2);
 CGContextDrawLinearGradient(lctx, gradient,CGPointMake(0,0),CGPointMake(0,48), 0);

 CGContextSaveGState(ctx);
 CGContextSetBlendMode(ctx,kCGBlendModeDarken);
 for(int n=1;n<5;n++)
 {
  CGContextTranslateCTM(ctx,w/2.0,h/2.0);
  CGContextRotateCTM(ctx, M_PI_2);
  CGContextTranslateCTM(ctx,-w/2.0,-h/2.0);
  CGContextDrawLayerAtPoint(ctx,CGPointMake((n%2)*dh,(n%2)*-dh),l);
 }
 CGContextRestoreGState(ctx);