View绘制系列(6)-Canvas其他图形绘制

Canvas其他图形绘制

通过上篇的学习，相信同学们已经对Canvas基础图形的绘制有了了解和掌握，那么同学们有没有什么疑惑呢？上篇中是不是缺了什么？

在上篇中我们介绍了点，线，矩形，圆，椭圆等，三角形呢？三角形也算是常见的基础图形，它怎么绘制呢？数学上将任何几何体都可以通过点线面三个基础元素构成，三角形就是三条首尾相连的直线构成，进而我们只需要调用drawLine或者drawLines即可，实现方案如下：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Paint linePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
    linePaint.setStyle(Paint.Style.STROKE);
    linePaint.setStrokeWidth(20);
    canvas.drawLine(30,30,600,30,linePaint);
    canvas.drawLine(600,30,600,1500,linePaint);
    canvas.drawLine(600,1500,30,30,linePaint);
}

运行效果如下：

这样就完成了绘制三角形的需求吗？还差点，前文中圆，矩形等图形，都可以绘制填充类型和线框类型，上述方法画出来的是线框类型，我要绘制一个填充三角形，怎么做呢？

对比上文，答案显而易见，把画笔类型改成FILL类型不就好，那么一起来动手试下吧，修改画笔类型为FILL，代码如下：

@Override
protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   Paint linePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
   linePaint.setStyle(Paint.Style.FILL);
   linePaint.setStrokeWidth(20);
   canvas.drawLine(30,30,600,30,linePaint);
   canvas.drawLine(600,30,600,1500,linePaint);
   canvas.drawLine(600,1500,30,30,linePaint);
}

运行效果：

纳尼？为什么还是一样的？我们再仔细思考下，前文中应用Path.setStyle(Paint.Style.FILL)有效的图形有什么特点？

单一曲线围成的闭合图形

这意味着我们要完成填充三角形的绘制需求，必须需要一条单一曲线(闭合图形这一点，三角形肯定是满足的)，也就是我们必须找到一个类，这个类可以描述构成三角形的三条直线首尾相连所形成的路径，Android中有这样的类吗？当然有，Path类就是用来做路径描述的

官方文档中关于Path类的描述是这样的：

The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and cubic curves.It can be drawn with canvas.drawPath(path, paint), either filled or stroked(based on the paint’s Style)。

上面引用的这段话的大概意思是，Path是用来描述直线段，二次曲线及三次曲线所组成的复合几何路径。我们可以通过canvas.drawPath(Path path)方法绘制Path对象描述的组合路径，且可以通过Paint.setStyle(Style style)方法指定是否填充路径内部。

使用Path类绘制填充三角形的代码如下：

@Override
protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   //新建Path对象
   Path path = new Path();
   //移动路径起点到(30,30)，默认起点在(0,0)位置
   path.moveTo(30,30);
   //描述(30,30)到(600,30)这段直线段
   path.lineTo(600,30);
   //描述(600,30)到(600,1500)这段直线段
   path.lineTo(600,1500);
   //描述(600,1500)到(30,30)这段直线段
   path.lineTo(30,30);//这里也可以调用path.close()方法，Path类会默认上一个点添加到起点的直线段
   Paint linePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

   canvas.drawPath(path,linePaint);
}