Quartz2D提供了两种渐变填充方法。第一种是使用Quartz自带的Gradient填充方法;第二种是使用自定义的着色器。
这里将先描述如何使用CGGradient对象来做渐变填充。
// Drawing code
// 创建Quartz上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 创建色彩空间对象
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
// 创建起点颜色
CGColorRef beginColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.01f, 0.99f, 0.01f, 1.0f});
// 创建终点颜色
CGColorRef endColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.99f, 0.99f, 0.01f, 1.0f});
// 创建颜色数组
CFArrayRef colorArray = CFArrayCreate(kCFAllocatorDefault, (
const
void
*[]){beginColor, endColor}, 2, nil);
// 创建渐变对象
CGGradientRef gradientRef = CGGradientCreateWithColors(colorSpaceRef, colorArray, (CGFloat[]){
0.0f,
// 对应起点颜色位置
1.0f
// 对应终点颜色位置
});
// 释放颜色数组
CFRelease(colorArray);
// 释放起点和终点颜色
CGColorRelease(beginColor);
CGColorRelease(endColor);
// 释放色彩空间
CGColorSpaceRelease(colorSpaceRef);
CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 460.0f), 0);
// 释放渐变对象
CGGradientRelease(gradientRef);
上述代码效果将产生一个由绿到蓝的一个渐变填充矩形。
这里使用了CGColor和CFArray来作为设置渐变颜色的参数。另外, CGGradientCreateWithColors的最后一个locations参数可以传空,这样默认为从0.0到1.0。
以上画的是两种颜色的渐变,是由绿到靛蓝。下面我们来看一下三层颜色的渐变:
// 创建Quartz上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 创建色彩空间对象
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
// 创建渐变对象
CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef,
(CGFloat[]){
0.01f, 0.99f, 0.01f, 1.0f,
0.01f, 0.99f, 0.99f, 1.0f,
0.99f, 0.99f, 0.01f, 1.0f
},
(CGFloat[]){
0.0f,
0.5f,
1.0f
},
3);
// 释放色彩空间
CGColorSpaceRelease(colorSpaceRef);
// 填充渐变色
CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 460.0f), 0);
// 释放渐变对象
CGGradientRelease(gradientRef);
上述代码绘制了三种颜色的渐变色,由绿到靛蓝到黄色。并且在45度轴方向上的颜色都是一样的。
当然,我们也可以通过改变矩形两点坐标的位置来改变渐变轴的方向,并且也可以设置关键颜色的位置:
// 创建Quartz上下文 CGContextRef context = UIGraphicsGetCurrentContext(); // 创建色彩空间对象 CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB(); // 创建渐变对象 CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef, (CGFloat[]){
0.01f, 0.99f, 0.01f, 1.0f,
0.01f, 0.99f, 0.99f, 1.0f,
0.99f, 0.99f, 0.01f, 1.0f
},
(CGFloat[]){
0.1f,
0.5f,
0.9f
},
3);
// 释放色彩空间 CGColorSpaceRelease(colorSpaceRef); // 填充渐变色 CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 460.0f), CGPointMake(320.0f, 0.0f), 0); // 释放渐变对象 CGGradientRelease(gradientRef); |
运行上述代码后我们可以发现,渐变轴被旋转了90度。而且蓝色与黄色区域也有所增大,更靠近矩形的中心。
相关推荐
在这个"Quartz2D渐变demo"中,我们将深入探讨如何在iOS应用中实现径向渐变和线性渐变。 1. **线性渐变(Linear Gradient)**: 线性渐变是从一个点到另一个点的色彩过渡,可以沿着水平、垂直或任何斜向方向。在...
Quartz 2D是苹果公司开发的一个先进的二维绘图引擎,它的API在iOS、tvOS和macOS的应用程序开发中广泛使用。Quartz 2D的主要特点包括其低级轻量级的二维渲染能力,无与伦比的输出保真度,以及独立于分辨率和设备的...
Quartz 2D 使用绘画者模型进行图形绘制。在这一模型下,每个连续的绘制操作都会在现有图层上添加新的图层,形成最终的图像。这种模型允许使用简单的图元构建复杂的图形结构。 #### 五、绘制目标:Graphics Context ...
2. 绘图坐标系统:Quartz2D使用左下角为原点的坐标系统,X轴向右延伸,Y轴向上延伸。可以使用`CGContextTranslateCTM`和`CGContextScaleCTM`等函数调整坐标系统。 3. 颜色与渐变:Quartz2D支持多种颜色模式,如RGB...
这个“Quartz2D使用案例”代码库提供了一些实用的示例,帮助开发者更好地理解和运用Quartz2D的核心功能。 1. **图像合成**: 在Quartz2D中,可以使用`CGContextDrawImage`函数来绘制图像。这个函数允许开发者将一...
3. **坐标系统**:Quartz 2D使用一个原点在左上角的笛卡尔坐标系统,X轴向右,Y轴向下。可以通过`CGContextTranslateCTM`和`CGContextScaleCTM`等函数来调整坐标系的位置和比例。 4. **路径(Paths)**:路径是由...
这份编程指南提供了丰富的信息,帮助开发者深入理解并掌握Quartz 2D的使用方法。以下是对Quartz 2D编程指南中的关键知识点的详细解释。 1. Quartz 2D基础: - Core Graphics Framework:Quartz 2D是基于Core ...
6. **渐变(Gradient)和图案(Pattern)**:Quartz2D支持线性渐变、径向渐变以及自定义图案,这些可以用于填充图形。 ### Quartz2D绘图的基本步骤 1. **创建图形上下文**:在iOS中,通常在`drawRect:`方法中创建...
例如,`drawDemo`项目很可能包含一个示例,展示了如何使用Quartz2D的基本绘图功能,如绘制线条、形状和文本,并可能涉及一些高级特性,如渐变、阴影和混合模式。 总之,Quartz2D为开发者提供了一套完整的2D图形绘制...
画直线是Quartz2D的基本操作之一。以下是一个简单的例子: ```objc - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); // 设置起点 CGContextMoveToPoint(ctx, 20, 100); ...
在Quartz2D_Demo中,你可以看到这些概念的实际应用,例如,创建一个自定义视图,在`drawRect:`方法内使用Quartz 2D进行绘图。通过运行这个示例,你可以更好地理解每个知识点在代码中的实现方式,以及它们如何协同...
Quartz 2D还支持线性渐变和径向渐变,这可以通过`CGGradient`对象实现。 7. **性能优化** 避免不必要的重绘是提高性能的关键。例如,可以将静态元素预先绘制到位图上下文,然后在需要时直接显示位图,而不是每次都...
开发者可以在UIView的`drawRect:`方法中直接使用Quartz 2D进行自定义绘图。 9. **性能优化**: 为了提高性能,Quartz 2D支持离屏渲染和图形缓存。离屏渲染允许在单独的位图上下文中完成复杂绘图,再将其合并到屏幕。...
在Quartz2D中,我们可以使用渐变(gradient)或者纹理(texture)来创建条纹。以下是一个基本的实现思路: 1. **创建条纹颜色**:使用`CGGradientCreateWithColors()`创建一个渐变颜色,其中包含两种或更多颜色,每...
本项目“ios-利用Quartz2D 画的猪头”是一个适合初学者的实践教程,旨在帮助开发者掌握基本的Quartz 2D绘图技术。 首先,理解Quartz 2D的基本概念非常重要。Quartz 2D 提供了路径(Path)、颜色(Color)、渐变...
Quartz 2D 使用了一种类似绘画者的模型进行绘图,每一步绘制都基于之前的绘图之上,形成层叠的效果。一旦绘制完成,无法撤销或修改,只能通过重新绘制覆盖原有内容来达到修改的效果。 #### Graphics Contexts (绘图...
在"ios-Quartz2D-1.zip"这个压缩包中,我们看到一个名为"TMYView"的文件,这很可能是一个自定义视图类,用于演示如何使用Quartz 2D来绘制小黄人图形。 首先,让我们深入理解Quartz 2D的基本概念。Quartz 2D基于Core...
"Quartz_2D_Programming_Guide"这份文档将深入讲解如何使用Quartz 2D进行2D图形编程。它涵盖了基本概念、API使用、示例代码以及最佳实践,帮助开发者掌握如何创建复杂的图形和动画。通过学习这个指南,你可以: 1. ...
Quartz2D基于Core Graphics框架,它提供了基本的绘图路径、颜色、渐变、阴影、字体和文本布局等功能。首先,我们需要在视图的`drawRect:`方法或者`draw(_:)`方法中设置画布(Context),这是所有Quartz2D绘图的起点...
当然,这只是Quartz2D功能的冰山一角,你可以通过更多的API来绘制更复杂的图形,如曲线、渐变、阴影等。 总之,Quartz2D是iOS开发中的一个重要工具,它让我们能够实现高度定制的用户界面,创造出独特且富有表现力的...