Quartz2D 和渐变线

Question

如何用quartz2d绘制渐变线？

Answer 1

CGContextDrawLinearGradient 绘制渐变。使用CGContextClipToRect（或相关的剪切函数）剪切到要填充渐变的区域。

不支持用渐变描边或填充路径，而是剪辑到要填充的区域。

Answer 2

我在 drawRect: 中使用了它，效果非常好：

double slope, cosy, siny;
double halfWidth = 2; // the thickness of the line will be 2*halfWith

// the start and end points have to be inside UIView frame coordinates
CGPoint start = CGPointMake(30, 20);
CGPoint end = CGPointMake(80, 90);  

slope = atan2((start.y - end.y), (start.x - end.x));
cosy = cos(slope);
siny = sin(slope);

CGContextRef context = UIGraphicsGetCurrentContext();

CGGradientRef myGradient;
CGColorSpaceRef myColorspace;
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = { 1.0, 1.0, 1.0, 1.0,  // Start color (White)
                          1.0, 0.0, 0.0, 1.0 }; // End color (Red)

myColorspace = CGColorSpaceCreateDeviceRGB();
myGradient = CGGradientCreateWithColorComponents (myColorspace, components, locations, num_locations);

CGContextMoveToPoint(context, start.x -halfWidth*siny , start.y +halfWidth*cosy);
CGContextAddLineToPoint(context, end.x -halfWidth*siny , end.y +halfWidth*cosy  );
CGContextAddLineToPoint(context, end.x +halfWidth*siny , end.y -halfWidth*cosy );
CGContextAddLineToPoint(context, start.x +halfWidth*siny, start.y -halfWidth*cosy);
CGContextAddLineToPoint(context, start.x -halfWidth*siny , start.y +halfWidth*cosy);    
CGContextClip(context);

CGContextDrawLinearGradient (context, myGradient, start, end, 0);
CGColorSpaceRelease( myColorspace );
CGGradientRelease (myGradient);