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
方法的使用。
查看下图,是一个八卦图,为了更好的说明问题,我在图上添加了辅助坐标系和点:
从图上我们可以将该图简单分为四部分,黑色小圆M,白色小圆N,以及曲线ABOA(即白色阴阳鱼区域),曲线BAOB(即黑色阴阳鱼区域).
进一步在上图中添加辅助点和辅助曲线,我们可以看到,白色阴阳鱼实际上是由半圆BFA,半圆AEO及半圆BDO的圆周曲线所围成,同理黑色阴阳鱼是由半圆AGB,半圆BDO,及半圆OEA的圆周围成。
假设我们以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()
)
那么左侧白色阴阳鱼的路径为:
//添加圆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);PathleftDiagramPath=newPath();
右侧黑色阴阳鱼的路径为:
//添加圆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);PathrightDiagramPath=newPath();
两个小圆的绘制代码,取半径为100:
PointtopCircleCenter=newPoint(getWidth()/2,getWidth()/4); //下面的白色小圆圆心 PointbottomCircleCenter=newPoint(getWidth()/2,getWidth()*3/4); //小圆半径 floatsmallerCircleRadius=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)
绘制阴阳鱼,随后绘制两个小圆,运行效果如下:
这里我在onDraw
函数刚开始使用canvas.drawColor(Color.GREY)
为页面绘制了灰色背景。
完整代码参见附录_Canvas
八卦图绘制
往期推荐
View绘制系列(1)-View简介
OpenCV SDK下载及Android Java环境搭建
玩转花式Loading