画线性渐变的条条-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_11158/article/details/81930827

本文介绍如何使用Objective-C中的CGGradientRef创建并绘制线性渐变效果。通过定义颜色、方向和使用CGContextDrawLinearGradient方法，实现自定义的渐变填充。文章还提及了利用clip进行宽度限制的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下:

CGGradientRef buildCGGradient(UIColor **colors, int item) {
	CGFloat colorComponents[item * 4];
	
	for (int i = 0; i < item; i++) {
		
		
		UIColor *color = colors[i];
		
		const CGFloat *components = CGColorGetComponents(color.CGColor);
		for (int j = 0; j < 4; j++) {
			colorComponents[i * 4 + j] = components[j];
		}		
	}
	
	CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
	CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colorComponents, NULL, item);
	CGColorSpaceRelease(rgb);
	return gradient;
}

......
CGPoint start = CGPointMake(0.0, 0.0);
CGPoint end = CGPointMake(0.0, barBounds.origin.y + barBounds.size.height);
UIColor *color1 = [[UIColor alloc] initWithRed: 0xFF/255.0 green:0xFF/255.0 blue:0xFF/255.0 alpha:1.0];
UIColor *color2 = [[UIColor alloc] initWithRed: 0x52/255.0 green:0x52/255.0 blue:0x52/255.0 alpha:1.0];
UIColor *emptyColors[2] = { color1, color2};

CGGradientRef gradientRef = buildCGGradient(emptyColors, 2);
CGContextDrawLinearGradient(context, gradientRef, start, end, options);
CGGradientRelease(gradientRef);

代码不完整, 但是很简单,往往有些人只是不知道用什么方法而已,上面的红色标注(buildCGGradient, CGContextDrawLinearGradient). 这里需要注意的是start,end变量.这个变量不是从哪画到哪的意思,而是颜色渐变的一个方向.

当你用上面的画出来了后就会发现,竟然没办法指定宽度. 利用clip可以解决的啦.哈哈

for(...) {

      ......
      CGContextSaveGState(context);
      CGContextClipToRect(context, clip);
      ......
      ......
      ......
      CGGradientRef gradientRef = buildCGGradient(colors, itemOfSegment);
      CGContextDrawLinearGradient(context, gradientRef, start, end, options);
      CGGradientRelease(gradientRef);
      CGContextRestoreGState(context);

}

虽然代码不全, 但是大致上就这样了. 效果图: