★60.自定义控件 ★11.Path之PathMeasure

PathMeasure方法

构造方法

方法名 释义
PathMeasure() 创建一个空的PathMeasure
PathMeasure(Path path, boolean forceClosed) 创建 PathMeasure 并关联一个指定的Path(Path需要已经创建完成)。

无参构造函数

使用之前需要先调用setPath()来与Path进行关联。被关联的 Path 必须是已经创建好的,如果关联之后Path内容进行了更改,则需要使用setPath()方法重新关联。

PathMeasure ()

有参构造函数

简介

第二个参数是用来确保Path闭合,如果设置为true,则不论之前Path是否闭合,都会自动闭合该Path(如果Path可以闭合的话)。

PathMeasure (Path path, boolean forceClosed)

注意事项

不论forceClosed设置为何种状态(true或者false),都不会影响原有Path的状态。闭合状态影响测量结果,闭合比不闭合更长。

公共方法

返回值 方法名 释义
void setPath(Path path, boolean forceClosed) 关联一个Path
boolean isClosed() 是否闭合
float getLength() 获取Path的长度
boolean nextContour() 跳转到下一个轮廓
boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo) 截取片段
boolean getPosTan(float distance, float[] pos, float[] tan) 获取指定长度的位置坐标及该点切线值
boolean getMatrix(float distance, Matrix matrix, int flags) 获取指定长度的位置坐标及该点Matrix

setPath()isClosed()getLength()

返回值 方法名 释义
void setPath(Path path, boolean forceClosed) 关联一个Path
boolean isClosed() 是否闭合
float getLength() 获取Path的长度

getSegment()

方法

// getSegment 用于获取Path的一个片段。
boolean getSegment (float startD, float stopD, Path dst, boolean startWithMoveTo)

参数

参数 作用 备注
返回值(boolean) 判断截取是否成功 true 表示截取成功,结果存入dst中,false 截取失败,不会改变dst中内容
startD 开始截取位置距离 Path 起点的长度 取值范围: 0 <= startD < stopD <= Path总长度
stopD 结束截取位置距离 Path 起点的长度 取值范围: 0 <= startD < stopD <= Path总长度
dst 截取的 Path 将会添加到 dst 中 注意: 是添加,而不是替换
startWithMoveTo 起始点是否使用 moveTo 用于保证截取的 Path 第一个点位置不变

示例

★60.自定义控件 ★11.Path之PathMeasure_第1张图片
canvas.translate(mViewWidth / 2, mViewHeight / 2);          // 平移坐标系
Path path = new Path();                                     // 创建Path并添加了一个矩形
path.addRect(-200, -200, 200, 200, Path.Direction.CW);
Path dst = new Path();                                      // 创建用于存储截取后内容的 Path
PathMeasure measure = new PathMeasure(path, false);         // 将 Path 与 PathMeasure 关联
// 截取一部分存入dst中,并使用 moveTo 保持截取得到的 Path 第一个点的位置不变
measure.getSegment(200, 600, dst, true);
canvas.drawPath(dst, mDeafultPaint);                        // 绘制 dst``
★60.自定义控件 ★11.Path之PathMeasure_第2张图片

被截取的Path片段会添加到dst中,而不是替换dst中到内容。

★60.自定义控件 ★11.Path之PathMeasure_第3张图片

如果startWithMoveTo()true,则被截取出来到Path片段保持原状,如果startWithMoveTo()false,则会将截取出来的Path片段的起始点移动到dst的最后一个点,以保证dst的连续性。

取值 主要功用
true 保证截取得到的 Path 片段不会发生形变
false 保证存储截取片段的 Path(dst) 的连续性
★60.自定义控件 ★11.Path之PathMeasure_第4张图片

nextContour

我们知道Path可以由多条曲线构成,但不论是getLength()getgetSegment()或者是其它方法,都只会在其中第一条线段上运行,而这个nextContour()就是用于跳转到下一条曲线到方法,如果跳转成功,则返回true, 如果跳转失败,则返回false

★60.自定义控件 ★11.Path之PathMeasure_第5张图片
canvas.translate(mViewWidth / 2, mViewHeight / 2);      // 平移坐标系
Path path = new Path();
path.addRect(-100, -100, 100, 100, Path.Direction.CW);  // 添加小矩形
path.addRect(-200, -200, 200, 200, Path.Direction.CW);  // 添加大矩形
canvas.drawPath(path,mDeafultPaint);                    // 绘制 Path
PathMeasure measure = new PathMeasure(path, false);     // 将Path与PathMeasure关联
float len1 = measure.getLength();                       // 获得第一条路径的长度
measure.nextContour();                                  // 跳转到下一条路径
float len2 = measure.getLength();                       // 获得第二条路径的长度
Log.i("LEN","len1="+len1);                              // 输出两条路径的长度
Log.i("LEN","len2="+len2);
com.gcssloop.canvas I/LEN: len1=800.0
com.gcssloop.canvas I/LEN: len2=1600.0

注意:

  • 曲线的顺序与Path中添加的顺序有关。
  • getLength()获取到到是当前一条曲线分长度,而不是整个Path的长度。

getPosTan

这个方法是用于得到路径上某一点的位置以及该位置的正切值。

方法

boolean getPosTan (float distance, float[] pos, float[] tan)

参数

参数 作用 备注
返回值(boolean) 判断获取是否成功 true表示成功,数据会存入 pos 和 tan 中,false 表示失败,pos 和 tan 不会改变
distance 距离 Path 起点的长度 取值范围: 0 <= distance <= getLength
pos 该点的坐标值 当前点在画布上的位置,有两个数值,分别为x,y坐标。
tan 该点的正切值 当前点在曲线上的方向,使用 Math.atan2(tan[1], tan[0]) 获取到正切角的弧度值。

注意:tan是用来判断Path上趋势的,即在这个位置上曲线的走向,请看示例,注意箭头的方向。

★60.自定义控件 ★11.Path之PathMeasure_第6张图片

示例

★60.自定义控件 ★11.Path之PathMeasure_第7张图片
private float currentValue = 0;     // 用于纪录当前的位置,取值范围[0,1]映射Path的整个长度
private float[] pos;                // 当前点的实际位置
private float[] tan;                // 当前点的tangent值,用于计算图片所需旋转的角度
private Bitmap mBitmap;             // 箭头图片
private Matrix mMatrix;             // 矩阵,用于对图片进行一些操作
private void init(Context context) {
    pos = new float[2];
    tan = new float[2];
    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inSampleSize = 2;       // 缩放图片
    mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.arrow, options);
    mMatrix = new Matrix();
}
canvas.translate(mViewWidth / 2, mViewHeight / 2);      // 平移坐标系
Path path = new Path();                                 // 创建 Path
path.addCircle(0, 0, 200, Path.Direction.CW);           // 添加一个圆形
PathMeasure measure = new PathMeasure(path, false);     // 创建 PathMeasure
currentValue += 0.005;                                  // 计算当前的位置在总长度上的比例[0,1]
if (currentValue >= 1) {
  currentValue = 0;
}

measure.getPosTan(measure.getLength() * currentValue, pos, tan);        // 获取当前位置的坐标以及趋势
mMatrix.reset();                                                        // 重置Matrix
float degrees = (float) (Math.atan2(tan[1], tan[0]) * 180.0 / Math.PI); // 计算图片旋转角度
mMatrix.postRotate(degrees, mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);   // 旋转图片
mMatrix.postTranslate(pos[0] - mBitmap.getWidth() / 2, pos[1] - mBitmap.getHeight() / 2);   // 将图片绘制中心调整到与当前点重合
canvas.drawPath(path, mDeafultPaint);                                   // 绘制 Path
canvas.drawBitmap(mBitmap, mMatrix, mDeafultPaint);                     // 绘制箭头
invalidate();                                                           // 重绘页面

注意:页面刷新此处是在onDraw()里面调用了invalidate()方法来保持界面不断刷新,但并不提倡这么做,正确对做法应该是使用 线程 或者ValueAnimator来控制界面的刷新,关于控制页面刷新这一部分会在后续的 动画部分 详细讲解,同样敬请期待。

getMatrix

这个方法是用于得到路径上某一点的位置以及该位置的正切值的矩阵。这个方法就相当于我们在前一个例子中封装matrix的过程由getMatrix()替我们做了,即返回 点和趋势 -> Matrix 的变成了直接返回 Matrix

方法

boolean getMatrix (float distance, Matrix matrix, int flags)

参数

参数 作用 备注
返回值(boolean) 判断获取是否成功 true表示成功,数据会存入matrix中,false 失败,matrix内容不会改变
distance 距离 Path 起点的长度 取值范围: 0 <= distance <= getLength
matrix 根据 falgs 封装好的matrix 会根据 flags 的设置而存入不同的内容
flags 规定哪些内容会存入到matrix中 可选择 POSITION_MATRIX_FLAG(位置)、ANGENT_MATRIX_FLAG(正切)

示例

Path path = new Path();                                 // 创建 Path
path.addCircle(0, 0, 200, Path.Direction.CW);           // 添加一个圆形
PathMeasure measure = new PathMeasure(path, false);     // 创建 PathMeasure
currentValue += 0.005;                                  // 计算当前的位置在总长度上的比例[0,1]
if (currentValue >= 1) {
    currentValue = 0;
}
// 直接获取当前位置的坐标以及趋势的矩阵
measure.getMatrix(measure.getLength() * currentValue, mMatrix, PathMeasure.TANGENT_MATRIX_FLAG | PathMeasure.POSITION_MATRIX_FLAG);

mMatrix.preTranslate(-mBitmap.getWidth() / 2, -mBitmap.getHeight() / 2);   // <-- 将图片绘制中心调整到与当前点重合(注意:此处是前乘pre)
canvas.drawPath(path, mDeafultPaint);                                   // 绘制 Path
canvas.drawBitmap(mBitmap, mMatrix, mDeafultPaint);                     // 绘制箭头
invalidate();

Path & SVG

SVG 就是把Path的操作存为数据,在用的时候用Path操作画出来。
实用第三方工具:android-pathview、AndroidSVG

Path实战

代码示例

★60.自定义控件 ★11.Path之PathMeasure_第8张图片

你可能感兴趣的:(★60.自定义控件 ★11.Path之PathMeasure)