绘图quartz之渐变

实现线性渐变   径向渐变

自己新建的view中有一个drawRect:(cgrect)rect方法

在这个方法里 可以通过画图 将内容显示在画板上(即最下边的view)

渐变的方式分两种  :1种是线性渐变    1种是径向渐变

首先先看 线性渐变  

1 设置图像的上下文 

2 获得颜色空间  说明他是什么类型的颜色

3 设置开始颜色  结束颜色  并且将他们换成Cg颜色 

4 设置渐变   渐变的4个参数  没有的需要进行创建  2  3 

5 绘制线性渐变  绘制径向渐变

6清理creat创建的对象 用cg

// Drawing code     //获得当前图形器的当前的上下文 CGContextRef context  = UIGraphicsGetCurrentContext();     //创建渐变的颜色空间类型是RGB颜色 CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();     //设置颜色的开始 颜色的结束 UIColor *beginColor =  [UIColor redColor];     //将颜色转换为cgColor//CGFloat是浮点型的基本数据类型 CGFloat *beginC =CGColorGetComponents([beginColor CGColor]);     UIColor *endColor = [UIColor yellowColor];     CGFloat *endC = CGColorGetComponents([endColor CGColor]);     //将两个颜色的元素加入到一个Cgfloat数组中 CGFloat component[8] = {beginC[0],beginC[1],beginC[2],beginC[3],endC[0],endC[1],endC[2],endC[3]};     //设定颜色的区间 区间范围是0 1  如果区间没有你要的颜色 就会执行靠近区间的颜色 CGFloat location[2] ={0,1};     //设置渐变

CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, component, location, 2);

     //绘制直线渐变

CGContextDrawLinearGradient(context, gradient, CGPointMake(100, 100), CGPointMake(200, 200), 0);

     //绘制径向渐变

CGContextDrawRadialGradient(context, gradient, CGPointMake(300, 300), 50, CGPointMake(300, 300), 60, kCGGradientDrawsBeforeStartLocation);

    //清理 CGColorSpaceRelease(colorSpace);

    CGGradientRelease(gradient);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。   主要包括四个属性:     执行变换的属性:...

23810
来自专栏codelang

用kotlin来实现一个打方块的小游戏

1361
来自专栏前端说吧

CSS3-canvas绘制线性渐变

2825
来自专栏HTML5学堂

CSS3渐变,就是这么玩

HTML5学堂(码匠):渐变背景是一直在页面中常见的元素之一,但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦,需要设计...

3785
来自专栏程序员的诗和远方

Canvas画图-一个比想象中更骚气的圆(渐变圆环)

之前介绍了Canvas画图基础,这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛,和圆环结合做进度条非常酷,今天我们就来画一个这样的圆环...

7487
来自专栏Spring相关

使用canvas绘制渐变色矩形和使用按键控制人物移动

1143
来自专栏HTML5学堂

CSS3 渐变 — 径向渐变

HTML5学堂(码匠):有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变,两者的实现方法大同小异,但CSS3的径向渐变比线性渐变稍微复杂些,颜色...

3215
来自专栏偏前端工程师的驿站

CSS3魔法堂:背景渐变(Gradient)

一、前言                               很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认...

49210
来自专栏前端儿

Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

4991
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

1212

扫码关注云+社区

领取腾讯云代金券