自定义View第四章：Path(路径)

本文是参考 https://www.gcssloop.com/ 仅仅用于个人学习及帮助记忆。

在前面我们讲解的所有绘制都是简单图形(如 矩形 圆 圆弧等)，而对于那些复杂一点的图形则没法去绘制(如绘制一个心形 正多边形 五角星等)，而使用Path不仅能够绘制简单图形，也可以绘制这些比较复杂的图形。另外，根据路径绘制文本和剪裁画布都会用到Path。

Path之基本操作

Path使用方法详解

• 第1组: moveTo、 setLastPoint、 lineTo 和 close
  由于Path的有些知识点无法单独来讲，所以本次采取了一次讲一组方法。
  先创建画笔：

Paint mPaint = new Paint();             // 创建画笔
mPaint.setColor(Color.BLUE);           // 画笔颜色 - 蓝色色
mPaint.setStyle(Paint.Style.STROKE);    // 填充模式 - 描边
mPaint.setStrokeWidth(5);              // 边框宽度 - 5

lineTo：

public void lineTo (float x, float y)

lineTo很简单，只有一个方法，作用也很容易理解，line嘛，顾名思义就是一条线。
俗话(数学书上)说，两点确定一条直线，但是看参数明显只给了一个点的坐标吧(这不按常理出牌啊)。
再仔细一看，这个lineTo除了line外还有一个to呢，to翻译过来就是“至”，到某个地方的意思，lineTo难道是指从某个点到参数坐标点之间连一条线？
没错，你猜对了，但是这某个点又是哪里呢？
前面我们提到过Path可以用来描述一个图像的轮廓，图像的轮廓通常都是用一条线构成的，所以这里的某个点就是上次操作结束的点，如果没有进行过操作则默认点为坐标原点。

        canvas.translate(mWidth / 2, mHeight / 2);
        Path path = new Path();
        path.lineTo(200, 200);
        path.lineTo(200, 0);
        canvas.drawPath(path, mPaint);

在示例中我们调用了两次lineTo，第一次由于之前没有过操作，所以默认点就是坐标原点O，结果就是坐标原点O到A(200,200)之间连直线(用蓝色圈1标注)。
第二次lineTo的时候，由于上次的结束位置是A(200,200),所以就是A(200,200)到B(200,0)之间的连线(用蓝色圈2标注)。

moveTo 和 setLastPoint：

// moveTo
public void moveTo (float x, float y)
// setLastPoint
public void setLastPoint (float dx, float dy)

这两个方法虽然在作用上有相似之处，但实际上却是完全不同的两个东东

方法名	简介	是否影响之前的操作	是否影响之后操作
moveTo	移动下一次操作的起点位置	否	是
setLastPoint	设置之前操作的最后一个点位置	是	是

        canvas.translate(mWidth / 2, mHeight / 2);
        Path path = new Path();
        path.lineTo(200, 200);
        path.moveTo(200,100);
        path.lineTo(200, 0);
        canvas.drawPath(path, mPaint);
      /**=======================================**/
       canvas.translate(mWidth / 2, mHeight / 2);
        Path path = new Path();
        path.lineTo(200, 200);
        path.setLastPoint(200,100);
        path.lineTo(200, 0);
        canvas.drawPath(path, mPaint);

这个和上面演示lineTo的方法一致，只不过在两个lineTo之间添加了一个moveTo。
moveTo只改变下次操作的起点，在执行完第一次LineTo的时候，本来的默认点位置是A(200,200),但是moveTo将其改变成为了C(200,100),所以在第二次调用lineTo的时候就是连接C(200,100) 到 B(200,0) 之间的直线(用蓝色圈2标注)。

setLastPoint是重置上一次操作的最后一个点，在执行完第一次的lineTo的时候，最后一个点是A(200,200),而setLastPoint更改最后一个点为C(200,100),所以在实际执行的时候，第一次的lineTo就不是从原点O到A(200,200)的连线了，而变成了从原点O到C(200,100)之间的连线了。
在执行完第一次lineTo和setLastPoint后，最后一个点的位置是C(200,100),所以在第二次调用lineTo的时候就是C(200,100) 到 B(200,0) 之间的连线(用蓝色圈2标注)。

close：

public void close ()

close方法用于连接当前最后一个点和最初的一个点(如果两个点不重合的话)，最终形成一个封闭的图形。

        canvas.translate(mWidth / 2, mHeight / 2);
        Path path = new Path();
        path.lineTo(200, 200);
        path.lineTo(200, 0);
        path.close();       
        canvas.drawPath(path, mPaint);

很明显，两个lineTo分别代表第1和第2条线，而close在此处的作用就算连接了B(200,0)点和原点O之间的第3条线，使之形成一个封闭的图形。
注意：close的作用是封闭路径，与连接当前最后一个点和第一个点并不等价。如果连接了最后一个点和第一个点仍然无法形成封闭图形，则close什么 也不做。

• 第2组: addXxx与arcTo
  这次内容主要是在Path中添加基本图形，重点区分addArc与arcTo。
  【第一类基本形状】

// 第一类(基本形状)

// 圆形
public void addCircle (float x, float y, float radius, Path.Direction dir)
// 椭圆
public void addOval (RectF oval, Path.Direction dir)
// 矩形
public void addRect (float left, float top, float right, float bottom, Path.Direction dir)
public void addRect (RectF rect, Path.Direction dir)
// 圆角矩形
public void addRoundRect (RectF rect, float[] radii, Path.Direction dir)
public void addRoundRect(float left, float top, float right, float bottom, float rx, float ry,Direction dir)
public void addRoundRect (RectF rect, float rx, float ry, Path.Direction dir)
public void addRoundRect(float left, float top, float right, float bottom, float[] radii,Direction dir)

这一类就是在path中添加一个基本形状，基本形状部分和前面所讲的绘制基本形状并无太大差别
本次只将其中不同的部分摘出来详细讲解一下。
仔细观察一下第一类是方法，无一例外，在最后都有一个 Path.Direction，这是一个什么神奇的东东？
Direction的意思是 方向，趋势。 点进去看一下会发现Direction是一个枚举(Enum)类型，里面只有两个枚举常量，如下：

类型	解释	翻译
CW	clockwise	顺时针
CCW	counter-clockwise	逆时针

顺时针和逆时针的作用：
1 在添加图形时确定闭合顺序(各个点的记录顺序)
2 对图形的渲染结果有影响(是判断图形渲染的重要条件)
咱们先研究确定闭合顺序的问题，添加一个矩形试试看：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
Path path = new Path();
path.addRect(-200,-200,200,200, Path.Direction.CW);
canvas.drawPath(path,mPaint);

将上面代码的CW改为CCW再运行一次。接下来就是见证奇迹的时刻，两次运行结果一模一样，有木有很神奇！
其实啊，这个东东是自带隐身技能的，想要让它现出原形，就要用到咱们刚刚学到的setLastPoint(重置当前最后一个点的位置)。

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
Path path = new Path();
path.addRect(-200,-200,200,200, Path.Direction.CW);
path.setLastPoint(-300,300);                // <-- 重置最后一个点的位置
canvas.drawPath(path,mPaint);

可以明显看到，图形发生了奇怪的变化。为何会如此呢？
我们先分析一下，绘制一个矩形(仅绘制边线)，实际上只需要进行四次lineTo操作就行了，也就是说，只需要知道4个点的坐标，然后使用moveTo到第一个点，之后依次lineTo就行了(从上面的测试可以看出，在实际绘制中也确实是这么干的)。
可是为什么要这么做呢？确定一个矩形最少需要两个点(对角线的两个点)，根据这两个点的坐标直接算出四条边然后画出来不就行了，干嘛还要先计算出四个点坐标，之后再连直线呢？
这个就要涉及一些path的存储问题了，前面在path中的定义中说过，Path是封装了由直线和曲线(二次，三次贝塞尔曲线)构成的几何路径。其中曲线部分用的是贝塞尔曲线，稍后再讲。 然而除了曲线部分就只剩下直线了，对于直线的存储最简单的就是记录坐标点，然后直接连接各个点就行了。虽然记录矩形只需要两个点，但是如果只用两个点来记录一个矩形的话，就要额外增加一个标志位来记录这是一个矩形，显然对于存储和解析都是很不划算的事情，将矩形转换为直线，为的就是存储记录方便。
扯了这么多，该回归正题了，就是我们的顺时针和逆时针在这里是干啥的？
图形在实际记录中就是记录各个的点，对于一个图形来说肯定有多个点，既然有这么多的点，肯定就需要一个先后顺序，这里顺时针和逆时针就是用来确定记录这些点的顺序的。
对于上面这个矩形来说，我们采用的是顺时针(CW)，所以记录的点的顺序就是 A -> B -> C -> D. 最后一个点就是D，我们这里使用setLastPoint改变最后一个点的位置实际上是改变了D的位置。
理解了上面的原理之后，设想如果我们将顺时针改为逆时针(CCW)，则记录点的顺序应该就是 A -> D -> C -> B, 再使用setLastPoint则改变的是B的位置，我们试试看结果和我们的猜想是否一致：

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
Path path = new Path();
path.addRect(-200,-200,200,200, Path.Direction.CCW);
path.setLastPoint(-300,300);                // <-- 重置最后一个点的位置
canvas.drawPath(path,mPaint);

通过验证发现，发现结果和我们猜想的一样，但是还有一个潜藏的问题不晓得大家可否注意到。我们用两个点的坐标确定了一个矩形，矩形起始点(A)就是我们指定的第一个点的坐标。
需要注意的是，交换坐标点的顺序可能就会影响到某些绘制内容哦，例如上面的例子，你可以尝试交换两个坐标点，或者指定另外两个点来作为参数，虽然指定的是同一个矩形，但实际绘制出来是不同的哦。
参数中点的顺序很重要！
参数中点的顺序很重要！
参数中点的顺序很重要！

【第二类Path】

// 第二类(Path)
// path
public void addPath (Path src)
public void addPath (Path src, float dx, float dy)
public void addPath (Path src, Matrix matrix)

这个相对比较简单，也很容易理解，就是将两个Path合并成为一个。
第三个方法是将src添加到当前path之前先使用Matrix进行变换。
第二个方法比第一个方法多出来的两个参数是将src进行了位移之后再添加进当前path中。

        canvas.translate(mWidth / 2, mHeight / 2);
        Path path = new Path();
        Path path2 = new Path();
        path.addRect(-200, -200, 200, 200, Path.Direction.CW);
        path2.addCircle(0, 0, 100, Path.Direction.CW);
        //path.addPath(path2); (图一)
        path.addPath(path2, 0, -200); (图二)
        canvas.drawPath(path, mPaint);

【第三类addArc与arcTo】

// 第三类(addArc与arcTo)
// addArc
public void addArc (RectF oval, float startAngle, float sweepAngle)
public void addArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle)
// arcTo
public void arcTo (RectF oval, float startAngle, float sweepAngle)
public void arcTo (RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo)
public void arcTo (float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo)

参数        摘要
oval        圆弧的外切矩形。
startAngle  开始角度
sweepAngle  扫过角度(-360 <= sweepAngle <360)
forceMoveTo 是否强制使用MoveTo

PS: sweepAngle取值范围是 -360, 360，包含-360但不包括360，当 >= 360 或者 < -360 时将不会绘制任何内容， 对于360，你可以用一个接近的值替代，例如: 359.99。
从名字就可以看出，这两个方法都是与圆弧相关的，作用都是添加一个圆弧到path中，但既然存在两个方法，两者之间肯定是有区别的：
addArc 直接添加一个圆弧到path中
arcTo 添加一个圆弧到path，如果圆弧的起点和上次最后一个坐标点不相同，就连接两个点
forceMoveTo 这个变量意思为“是否强制使用moveTo”，也就是说，是否使用moveTo将变量移动到圆弧的起点位移，也就意味着
true 先强制调用moveTo移动path画笔至圆弧起点，再绘制圆弧
false 不移动，而是连接最后一个点与圆弧起点
ps：如果调用arcTo(RectF oval, float startAngle, float sweepAngle,boolean forceMoveTo)方法之前没有对path进行任何操作，则forceMoveTo设置true或false效果都和设置true一样

canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴
Path path = new Path();
path.lineTo(100,100);
RectF oval = new RectF(0,0,300,300);
path.addArc(oval,0,270);
// path.arcTo(oval,0,270,true);             // <-- 和上面一句作用等价
canvas.drawPath(path,mPaint);
/**================================================================**/
canvas.translate(mWidth / 2, mHeight / 2);  // 移动坐标系到屏幕中心
canvas.scale(1,-1);                         // <-- 注意 翻转y坐标轴
Path path = new Path();
path.lineTo(100,100);
RectF oval = new RectF(0,0,300,300);
path.arcTo(oval,0,270);
// path.arcTo(oval,0,270,false);             // <-- 和上面一句作用等价
canvas.drawPath(path,mPaint);

• 第3组：isEmpty、 isRect、isConvex、 set 和 offset
  isEmpty

public boolean isEmpty ()
判断path中是否包含内容。
Path path = new Path();
Log.e("1",path.isEmpty()+"");
path.lineTo(100,100);
Log.e("2",path.isEmpty()+"");
log输出结果:
com.sloop.canvas E/1: true
com.sloop.canvas E/2: false

isRect

public boolean isRect (RectF rect)
判断path是否是一个矩形，如果是一个矩形的话，会将矩形的信息存放进参数rect中。
path.lineTo(0,400);
path.lineTo(400,400);
path.lineTo(400,0);
path.lineTo(0,0);
RectF rect = new RectF();
boolean b = path.isRect(rect);
Log.e("Rect","isRect:"+b+"| left:"+rect.left+"| top:"+rect.top+"| right:"+rect.right+"| bottom:"+rect.bottom);
log 输出结果:
com.sloop.canvas E/Rect: isRect:true| left:0.0| top:0.0| right:400.0| bottom:400.0

set

public void set (Path src)
将新的path赋值到现有path。

offset

public void offset (float dx, float dy)
public void offset (float dx, float dy, Path dst)
这个的作用也很简单，就是对path进行一段平移，它和Canvas中的translate作用很像，但Canvas作用于整个画布，而path的offset只作用于当前path。
其实第二个方法中最后的参数dst是存储平移后的path的。

dst不为空      将当前path平移后的状态存入dst中，不会影响当前path
dst为空(null)  平移将作用于当前path，相当于第一种方法