`
1021082712
  • 浏览: 86336 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

Quartz2D之渐变使用

    博客分类:
  • ios
阅读更多

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

    在这个"Quartz2D渐变demo"中,我们将深入探讨如何在iOS应用中实现径向渐变和线性渐变。 1. **线性渐变(Linear Gradient)**: 线性渐变是从一个点到另一个点的色彩过渡,可以沿着水平、垂直或任何斜向方向。在...

    Quartz 2D编程指南 官方文档翻译

    Quartz 2D是苹果公司开发的一个先进的二维绘图引擎,它的API在iOS、tvOS和macOS的应用程序开发中广泛使用。Quartz 2D的主要特点包括其低级轻量级的二维渲染能力,无与伦比的输出保真度,以及独立于分辨率和设备的...

    Quartz 2D编程指南(1)

    Quartz 2D 使用绘画者模型进行图形绘制。在这一模型下,每个连续的绘制操作都会在现有图层上添加新的图层,形成最终的图像。这种模型允许使用简单的图元构建复杂的图形结构。 #### 五、绘制目标:Graphics Context ...

    Quartz2D的各种图形的绘制

    2. 绘图坐标系统:Quartz2D使用左下角为原点的坐标系统,X轴向右延伸,Y轴向上延伸。可以使用`CGContextTranslateCTM`和`CGContextScaleCTM`等函数调整坐标系统。 3. 颜色与渐变:Quartz2D支持多种颜色模式,如RGB...

    Quartz2D使用案例

    这个“Quartz2D使用案例”代码库提供了一些实用的示例,帮助开发者更好地理解和运用Quartz2D的核心功能。 1. **图像合成**: 在Quartz2D中,可以使用`CGContextDrawImage`函数来绘制图像。这个函数允许开发者将一...

    Quartz 2D Demo @appleDev

    3. **坐标系统**:Quartz 2D使用一个原点在左上角的笛卡尔坐标系统,X轴向右,Y轴向下。可以通过`CGContextTranslateCTM`和`CGContextScaleCTM`等函数来调整坐标系的位置和比例。 4. **路径(Paths)**:路径是由...

    Quartz 2D编程指南(英文完整版+中文部分翻译版)

    这份编程指南提供了丰富的信息,帮助开发者深入理解并掌握Quartz 2D的使用方法。以下是对Quartz 2D编程指南中的关键知识点的详细解释。 1. Quartz 2D基础: - Core Graphics Framework:Quartz 2D是基于Core ...

    Quartz2D绘制基本图形

    6. **渐变(Gradient)和图案(Pattern)**:Quartz2D支持线性渐变、径向渐变以及自定义图案,这些可以用于填充图形。 ### Quartz2D绘图的基本步骤 1. **创建图形上下文**:在iOS中,通常在`drawRect:`方法中创建...

    Quartz2D基础绘画

    例如,`drawDemo`项目很可能包含一个示例,展示了如何使用Quartz2D的基本绘图功能,如绘制线条、形状和文本,并可能涉及一些高级特性,如渐变、阴影和混合模式。 总之,Quartz2D为开发者提供了一套完整的2D图形绘制...

    iOS开发中Quartz2D的基本使用方式举例

    画直线是Quartz2D的基本操作之一。以下是一个简单的例子: ```objc - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); // 设置起点 CGContextMoveToPoint(ctx, 20, 100); ...

    iOS的Quartz2D技术demo示例

    在Quartz2D_Demo中,你可以看到这些概念的实际应用,例如,创建一个自定义视图,在`drawRect:`方法内使用Quartz 2D进行绘图。通过运行这个示例,你可以更好地理解每个知识点在代码中的实现方式,以及它们如何协同...

    Quartz 2D刷帧Demo

    Quartz 2D还支持线性渐变和径向渐变,这可以通过`CGGradient`对象实现。 7. **性能优化** 避免不必要的重绘是提高性能的关键。例如,可以将静态元素预先绘制到位图上下文,然后在需要时直接显示位图,而不是每次都...

    quartz2D

    开发者可以在UIView的`drawRect:`方法中直接使用Quartz 2D进行自定义绘图。 9. **性能优化**: 为了提高性能,Quartz 2D支持离屏渲染和图形缓存。离屏渲染允许在单独的位图上下文中完成复杂绘图,再将其合并到屏幕。...

    iOS开发中Quartz2D绘图路径的使用以及条纹效果的实现

    在Quartz2D中,我们可以使用渐变(gradient)或者纹理(texture)来创建条纹。以下是一个基本的实现思路: 1. **创建条纹颜色**:使用`CGGradientCreateWithColors()`创建一个渐变颜色,其中包含两种或更多颜色,每...

    ios-利用Quartz2D 画的猪头 需要学习练习的可下载参考.zip

    本项目“ios-利用Quartz2D 画的猪头”是一个适合初学者的实践教程,旨在帮助开发者掌握基本的Quartz 2D绘图技术。 首先,理解Quartz 2D的基本概念非常重要。Quartz 2D 提供了路径(Path)、颜色(Color)、渐变...

    IOS Quartz 2D

    Quartz 2D 使用了一种类似绘画者的模型进行绘图,每一步绘制都基于之前的绘图之上,形成层叠的效果。一旦绘制完成,无法撤销或修改,只能通过重新绘制覆盖原有内容来达到修改的效果。 #### Graphics Contexts (绘图...

    ios-Quartz2D-1.zip

    在"ios-Quartz2D-1.zip"这个压缩包中,我们看到一个名为"TMYView"的文件,这很可能是一个自定义视图类,用于演示如何使用Quartz 2D来绘制小黄人图形。 首先,让我们深入理解Quartz 2D的基本概念。Quartz 2D基于Core...

    Quartz_2D_Programming_Guide.tar

    "Quartz_2D_Programming_Guide"这份文档将深入讲解如何使用Quartz 2D进行2D图形编程。它涵盖了基本概念、API使用、示例代码以及最佳实践,帮助开发者掌握如何创建复杂的图形和动画。通过学习这个指南,你可以: 1. ...

    Quartz2D绘画-下载进度

    Quartz2D基于Core Graphics框架,它提供了基本的绘图路径、颜色、渐变、阴影、字体和文本布局等功能。首先,我们需要在视图的`drawRect:`方法或者`draw(_:)`方法中设置画布(Context),这是所有Quartz2D绘图的起点...

    iOS Quartz2D详解 - imlifengfeng1

    当然,这只是Quartz2D功能的冰山一角,你可以通过更多的API来绘制更复杂的图形,如曲线、渐变、阴影等。 总之,Quartz2D是iOS开发中的一个重要工具,它让我们能够实现高度定制的用户界面,创造出独特且富有表现力的...

Global site tag (gtag.js) - Google Analytics