android canvas画渐变背景,View绘制系列(13)-Canvas渐变属性绘制
Canvas渐变属性绘制
五颜六色,七彩缤纷。有时候我们的UI设计稿也极尽色彩之能,比如下图这样:
这种渐变效果我们能画吗?不得不说,Android系统的基础构架还是很强大的,我们可以使用LinearGradient进行绘制,与其相关的还有SweepGradient,RadialGradient.
LinearGradient,SweepGradient及RadialGradient均为Shader子类,所以与前文类似,我们只需要调用paint.setShader方法将对象设置进去,然后进行绘制即可。
LinearGradient
使用代码如下:
int[] mColors = {Color.RED,Color.YELLOW,Color.GREEN,Color.BLUE};
//从(0,0)到(400,400)绘制线性渐变,也就是对角线区域为渐变水平线
LinearGradient linearGradient =
new LinearGradient(0, 0, 400, 400, mColors, null, Shader.TileMode.MIRROR);
paint.setShader(linearGradient);
canvas.drawRect(0,0,800,800,paint);
paint.setTextSize(400);
//使用渐变着色器绘制文本注意
canvas.drawText("注意:",200,1600,paint);
上述代码中我们使用的LinearGradient的构造原型是:LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],@Nullable float positions[], @NonNull TileMode tile),其中:
x0,y0,x1,y1:分别表示x轴及y轴起终点
colors:是一个颜色数组,表示渐变的颜色序列,我们这里依次是红黄绿蓝
positions:表示各个颜色在总长度上所占的比例,每个元素的取值范围在0到1之间,总体的和应该等于1,如果每个颜色的长度都相同,则可以取null
tile:绘制模式,前文已介绍
当然我们也可以通过修改x0,y0,x1,y1的值使其变成水平或竖直方向的渐变效果,当x0=x1时,绘制出来的效果为垂直方向的颜色渐变,当y0=y1时,绘制出来效果是水平方向的颜色渐变。
LinearGradient还有一个构造原型:
LinearGradient(float x0, float y0, float x1, float y1,
@ColorInt int color0, @ColorInt int color1,
@NonNull TileMode tile)
和上一个的区别是,这个构造原型里指定的颜色比较单一,只用指定起始颜色color0和结束颜色color1即可。
SweepGradient
SweepGradient-扫描渲染,也被称为梯度渲染,经常被用来实现雷达扫描效果。它的构造函数也有两个,第一个SweepGradient(float cx, float cy,@NonNull @ColorInt int colors[], @Nullable float positions[]),这个构造函数中:
cx,cy:绘制的中心点坐标
colors:用于绘制渐变效果的颜色数组,至少有两个元素,一个开始颜色,一个结束颜色
positions:同LinearGradient中的positions,用于指定各个颜色所占的长度比例,每个元素的取值范围在0到1之间,总体的和应该等于1,如果比例一样,则可以取null
第二个SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1),这个构造函数中只需要指定中心坐标和开始结束颜色就好。
使用代码如下:
float[] sweepPositions = {0.1f,0.1f,0.8f};
SweepGradient sweepGradient = new SweepGradient(550,850, sweepColors, sweepPositions);
paint.setShader(sweepGradient);
canvas.drawRect(100,700,1000,1000,paint);
运行效果:
RadialGradient
RadialGradient-环形渲染,用它可以实现水波纹动画,同样有两个构造函数,第一个是RadialGradient(float centerX, float centerY, float radius,@NonNull @ColorInt int colors[], @Nullable float stops[],@NonNull TileMode tileMode)其中:
centerX,centerY:圆环所在圆的圆心坐标
radius:绘制半径
colors:绘制的渐变颜色数组
stops:各颜色所占的百分比,相同则取null
tileMode:绘制模式,前文已介绍
另一个构造函数是RadialGradient(float centerX, float centerY, float radius,@ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode),直接声明圆心位置颜色和边界颜色,其他参数与第一个构造函数参数含义一致。
代码如下:
int[] radialColors = {Color.RED,Color.YELLOW,Color.GREEN};
RadialGradient radialGradient = new RadialGradient(700,1700,200,radialColors,null,TileMode.REPEAT);
paint.setShader(radialGradient);
canvas.drawCircle(700,1700,700,paint);
运行效果:
由于代码中设置的绘制模式是TileMode.REPEAT,所以红黄绿交替重复绘制。
android canvas画渐变背景,View绘制系列(13)-Canvas渐变属性绘制相关推荐
- Android高效率编码-第三方SDK详解系列(一)——百度地图,绘制,覆盖物,导航,定位,细腻分解!...
Android高效率编码-第三方SDK详解系列(一)--百度地图,绘制,覆盖物,导航,定位,细腻分解! 这是一个系列,但是我也不确定具体会更新多少期,最近很忙,主要还是效率的问题,所以一些有效的东西还 ...
- Android高效率编码-第三方SDK详解系列(一)——百度地图,绘制,覆盖物,导航,定位,细腻分解!
Android高效率编码-第三方SDK详解系列(一)--百度地图,绘制,覆盖物,导航,定位,细腻分解! 这是一个系列,但是我也不确定具体会更新多少期,最近很忙,主要还是效率的问题,所以一些有效的东西还 ...
- 前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题 经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
- canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
Canvas八卦图绘制 前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)及Path.cubicTo(float x1, floa ...
- canvas在舞台上点击后图片旋转_View绘制系列(10)Canvas基础变换
Canvas基础变换 前面学习了Canvas相关的一些绘制方法,不知道大家发现没?我们都是根据左上角(0,0)点算出来新的坐标,然后再绘制,这样明显不符合我们平常基于坐标原点绘制的习惯,那么我们能不能 ...
- 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】
标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...
- 【绘制】HTML5 Canvas 虚线和不到20行js代码实现蚂蚁线
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
- html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
- 【CSS】渐变背景(background-image)
文章目录 [CSS]渐变背景(background-image) 1.线性渐变 1.1 CSS代码 2.色标 2.1 添加色标 3.IE的支持程度 4. 平铺的线性渐变 5.径向渐变 5.1设置径向渐 ...
最新文章
- 怎么中文读_这些中文名字如果用日语念出来会怎样?!
- 操作表格_Excel表格基础操作-新手入门级
- 【SSL】HTTPS配置全过程
- webpack 编译完成执行代码
- 传统接口写法与Restful API 区别
- Centos 启用网卡出现 no link present. Check cable
- Expect学习笔记(1)
- python闭包函数的必要条件_Python闭包函数
- [LeetCode] Decode Ways [33]
- KELL中程序封装的实现
- 电动车结构及其工作原理
- Masimo与Penington研究所合作,提升公众对处方阿片类药物过量危害的认识
- ubuntu20.04 重启黑屏 仅有左上角白色横杠闪烁
- Swagger、Rap与Yapi接口管理
- Spark MLlib系列(二):基于协同过滤的电影推荐系统
- 坦克世界+服务器未响应,手把手解答win10系统玩坦克世界出现未响应的办法
- 【2】基因功能注释之SwissProt和Interproscan
- 第一章:基于Visual C++ 6.0使用运动控制卡控制电机转动实验操作指导
- 十万条评论告诉你,给《流浪地球》评1星的都是什么心态? | Alfred数据室
- Linux的基本操作——总结版
热门文章
- vue拦截器刷新登陆页面_Vue + Spring Boot 项目实战(六):前端路由与登录拦截器-Go语言中文社区...
- Blender插件Gizmo 3d Cursor And Saving Position 3D 1.5.0 光标
- 【论文汇总】 ECCV 2020 语义分割paper汇总
- win10/win7文件夹或文件查看方式怎么统一设置
- Java学习day078 Swing用户界面组件(四:选择组件)(复选框、单选钮、边框、组合框、滑动条)
- python plot如何保存图片_Matplotlib 保存图片、图画接口和显示中文的使用方法
- 【FI】统驭科目记账与特殊记账
- linux su 的含义,linux su命令的真正含义,linuxsu命令
- mysql2008安装虚拟机_在虚拟机xp系统中安装SQL Server2008的方法
- 如何看待中通讯42岁员工坠楼事件?背后深层原因剖析!