canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制
Canvas八卦图绘制
前面我们已经学习了Path.quadTo(float x1, float y1, float x2, float y2)
及Path.cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)
方法的使用,但并不是所有的曲线所有的曲线都需要用贝塞尔曲线来描述,毕竟在没有专业软件辅助的情况下,确认控制点也是一件很复杂的事情,比如说我们闭合曲线中包含一段椭圆弧或者圆弧,抑或者圆角矩形,我们该怎么做呢?作为描述组合路径的核心类,Path当然会提供对应的方法。
Path
部分路径截取函数对照说明表:
函数名 | 函数说明 | 备注 |
---|---|---|
addArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle)
|
添加以(left ,top )为左上顶点,(right ,bottom )为右下顶点矩形的内切椭圆中,以startAngle 角度起始,划过sweepAngle 角度后所得到的弧
|
注意:这里传入的startAngle 及sweepAngle 单位均为角度,sweepAngle 顺时针为正值,逆时针为负值
|
addArc(RectF oval, float startAngle, float sweepAngle)
|
同上,只是将矩形的描述方式改成了RectF 类对象描述
|
同上 |
addCircle(float x, float y, float radius, Direction dir)
|
添加一个圆到Path 路径中,dir 说明环绕圆周方向
|
其中dir 取值Direction.CW 为顺时钟,Direction.CCW 为逆时针
|
addOval(float left, float top, float right, float bottom, Direction dir)
|
添加一个椭圆到路径中,椭圆是以(left ,top )为左上顶点,(right , bottom )为右下顶点矩形的内切椭圆,dir 说明环绕方向
|
同上 |
addRect(float left, float top, float right, float bottom, Direction dir)
|
添加以(left ,top )为左上顶点,(right , bottom )为右下顶点的矩形,dir 说明环绕方向
|
同上 |
addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Direction dir)
|
添加以(left ,top )为左上顶点,(right , bottom )为右下顶点,以rx ,ry 为圆角度的圆角矩形,dir 说明环绕方向
|
同上 |
arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo)
|
添加以(left ,top )为左上顶点,(right ,bottom )为右下顶点矩形的内切椭圆中,以startAngle 角度起始,划过sweepAngle 角度后所得到的弧,forceMoveTo 是否强制修正路径起点,如果为true ,相当于执行Path.moveTo (startAngle 对应坐标),随后arcTo
|
注意:这里传入的startAngle 及sweepAngle 单位均为角度,sweepAngle 顺时针为正值,逆时针为负值
|
添加整个图形路径的函数原型比较简单,大家自行尝试使用下,这里我们重点演示下addArc
方法的使用。
查看下图,是一个八卦图,为了更好的说明问题,我在图上添加了辅助坐标系和点:
假设我们以View
宽度(在onDraw
函数内可以通过getWidth()
,getHeight()
获取View
的可见宽高)为大圆O直径,那么圆M及圆N直径就为getWidth()
/2。
圆O的外接矩形顶点为:
左上顶点:(0,0),右下顶点:(getWidth()
,getHeight()
)
圆M的外接矩形顶点为:
左上顶点:(getWidth()
/4,),右下顶点:(getWidth()
*3/4,getWidth()
/2)
圆N的外接矩形顶点为:
左上顶点:(getWidth()
/4,getWidth()
/2),右下顶点:(getWidth()
*3/4,getWidth()
)
那么左侧白色阴阳鱼的路径为:
Path leftDiagramPath = new Path();//添加圆O的左侧半圆BFA所在的圆周leftDiagramPath.addArc(0,0,getWidth(),getWidth(),90,180);//添加圆M的右侧半圆AEO所在的圆周,起始角度负90,以水平X正向为0度leftDiagramPath.addArc(getWidth()/4,0,getWidth()*3/4,getWidth()/2,-90,180);//添加圆N的左侧半圆ODB所在的圆周,起始角度负90,以水平X正向为0度leftDiagramPath.addArc(getWidth()/4,getWidth()/2,getWidth()*3/4,getWidth(),-90,-180);
右侧黑色阴阳鱼的路径为:
Path rightDiagramPath = new Path();//添加圆O的右侧半圆BGA所在的圆周rightDiagramPath.addArc(0,0,getWidth(),getWidth(),90,-180);//添加圆M的右侧半圆AEO所在的圆周,起始角度负90,以水平X正向为0度rightDiagramPath.addArc(getWidth()/4,0,getWidth()*3/4,getWidth()/2,-90,180);//添加圆N的左侧半圆ODB所在的圆周,起始角度负90,以水平X正向为0度rightDiagramPath.addArc(getWidth()/4,getWidth()/2,getWidth()*3/4,getWidth(),-90,-180);
两个小圆的绘制代码,取半径为100:
//上面的黑色小圆圆心Point topCircleCenter = new Point(getWidth()/2,getWidth()/4);//下面的白色小圆圆心Point bottomCircleCenter = new Point(getWidth()/2,getWidth()*3/4);//小圆半径float smallerCircleRadius = 100;
canvas.drawCircle(topCircleCenter.x,topCircleCenter.y,smallerCircleRadius,paint);canvas.drawCircle(bottomCircleCenter.x,bottomCircleCenter.y,smallerCircleRadius,paint);
先调用canvas.drawPath(@NonNull Path path, @NonNull Paint paint)
绘制阴阳鱼,随后绘制两个小圆,运行效果如下:
完整代码参见附录_Canvas
八卦图绘制
往期推荐
View绘制系列(1)-View简介
OpenCV SDK下载及Android Java环境搭建
玩转花式Loading
canvas 圆角矩形填充_View绘制系列(9)Canvas八卦图绘制相关推荐
- canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...
- canvas 圆角矩形填充_一篇文章让你学会你最“害怕”的Canvas,太有意思了
Canvas画布 基本用法 <canvas id='canvas' width="150" height="150"></canvas> ...
- canvas 圆角矩形填充_canvas制作圆角矩形(包括填充矩形的功能)
canvas制作圆角矩形(包括填充矩形的功能) 您的浏览器不支持 HTML5 canvas 标签. window.onload = function() { var myCanvas = docume ...
- canvas 圆角矩形填充_Canvas:随机长方形生成和色块填充
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var can = document.getElementById("art"); va ...
- 用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法 发布时间:2020-10-04 18:20:31 来源:脚本之家 阅读:103 作者:清夜 微信小程序允许对普通元素通过 border-radius 的 ...
- 微信小程序 canvas圆角矩形的绘制
微信小程序允许对普通元素通过 border-radius的设置来进行圆角的绘制,但有时候在使用 canvas绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就 ...
- canvas在舞台上点击后图片旋转_View绘制系列(10)Canvas基础变换
Canvas基础变换 前面学习了Canvas相关的一些绘制方法,不知道大家发现没?我们都是根据左上角(0,0)点算出来新的坐标,然后再绘制,这样明显不符合我们平常基于坐标原点绘制的习惯,那么我们能不能 ...
- html圆角矩形的渐变色,canvas圆角矩形 PS制作渐变圆角矩形: 方法一:
用canvas画只有一个角是圆角的矩形,能画出来么? CSS布局HTML小编今天和大家分享各位大侠指点, 找到方法了float[] radii={12f,12f,0f,0f,0f,0f,0f,0f}; ...
- canvas 圆角矩形,背景圆角矩形
//画布的圆角矩形 // **// * 绘制圆角矩形//* @param { Object } ctx - canvas组件的绘图上下文//* @param { Number } x - 矩形的x坐标 ...
最新文章
- 非对称加密,我终于理解了!
- JAVA的IO编程:管道流
- android调节音量——AudioManager的应用
- [html] 什么是本地存储的有效期?
- PostgreSQL的使用-02-在Linux下的基本配置
- Nginx Lua读取redis 进行权限认证操作
- 148. Sort List (java 给单链表排序)
- C++中的namespace(using namespace)的理解
- IAR开发环境的搭建以及CC2530单片机程序编程实验
- 记一次勒索病毒下的Oracle数据恢复
- java mybatis优点_mybatis优缺点是什么?有哪些优点和缺点?
- 基于SSM的设备租赁管理系统
- 安卓studio 添加后台bgm音乐的几种方法
- PrintWriter out=response.getWriter()的问题
- vim使用自定义snippets
- 解题笔记(39)——过河问题
- 《程序员之禅》一一10.10 淡泊宁静
- 命令行运行Unity脚本
- ISO18001是ISO制定的质量认证体系标准
- 数字化变革与冲突下,如何运用 BI 打造经营分析系统!
热门文章
- android获取本地图片后缀,Android向图片文件添加扩展信息EXIF如地点,时间,人物等...
- java jtextarea字体_java – 更改JTextArea中不同行的字体
- oracle一句话倒过来,oracle一些基本语句
- 2018年python薪资_2018年国内就业薪资高的7大编程语言排行
- springboot调用python脚本_Springboot实现上传文件接口,使用python的requests进行组装报文上传文件的方法...
- python保存运行结果下次使用_将python运行结果保存至本地文件中的示例讲解
- python怎么画出圆润的曲线_利用python画出AUC曲线的实例
- 解决配置Ubuntu中vnc远程显示灰屏
- DOM(二)——XML DOM
- 《C语言编程魔法书:基于C11标准》——1.3 主流C语言编译器介绍