android之自定view之(八)----PathMeasure

最新推荐文章于 2022-06-02 23:42:27 发布
最新推荐文章于 2022-06-02 23:42:27 发布
阅读量297 收藏
点赞数
分类专栏： android 自定义view 文章标签： PathMeasure
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hfreeman2008/article/details/90210060
版权

PathMeasure是什么？

PathMeasure是用来对Path进行测量的，一般PathMeasure是和Path配合使用的，通过PathMeasure，我们可以知道Path路径上某个点的坐标、Path的长度等等.

构造方法:

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

公共方法:

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

Android Demo

(1) 显示一个300*300的矩形

public class PathMeasureView extends View {

    private static final String TAG = "PathMeasureView";

    public PathMeasureView(Context context) {
        super(context);
        init(null, 0);
    }

    public PathMeasureView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public PathMeasureView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20f);
        Path sourcePath = new Path();
        sourcePath .addRect(300, 300, 600, 600, Path.Direction.CW);
        PathMeasure measure = new PathMeasure();
        measure.setPath(sourcePath , false);
        Log.e(TAG, "onDraw---measure.getLength() is " + measure.getLength());
        canvas.drawPath(sourcePath , paint);
    }

}

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.readygo.pathmeasuredemo.PathMeasureView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

UI显示如图:
在这里插入图片描述
log显示:

 E/PathMeasureView: onDraw---measure.getLength() is 1200.0

可以看到长度为矩形的周长1200=300*4

(2)显示一个300*300的矩形和截取一个从0到450长度的部分矩形

我们要显示如下效果图:
在这里插入图片描述
关键代码:

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20f);

        Path sourcePath = new Path();
        sourcePath.addRect(300, 300, 600, 600, Path.Direction.CW);
        canvas.drawPath(sourcePath, paint);

        paint.setColor(Color.BLACK);
        PathMeasure measure = new PathMeasure();
        measure.setPath(sourcePath, false);
        Path dstPath = new Path();
        measure.getSegment(0, 450, dstPath, true);
        canvas.drawPath(dstPath, paint);

(3)我们添加一条直线和0到450的部分矩形图片
UI显示如图:
在这里插入图片描述
具体实现逻辑:

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20f);
        Path sourcePath = new Path();
        sourcePath.addRect(300, 300, 600, 600, Path.Direction.CW);
        PathMeasure measure = new PathMeasure();
        measure.setPath(sourcePath, false);
        Path dstPath = new Path();
        //给dstPath添加一条直线
        dstPath.lineTo(200, 800);
        measure.getSegment(0, 450, dstPath, true);
        canvas.drawPath(dstPath, paint);

如果我们将代码修改为:

measure.getSegment(0, 450, dstPath, false); //ture----false

则UI显示为:
在这里插入图片描述
(4) pathMeasure.getPosTan 实现动画
效果UI:
在这里插入图片描述
实现逻辑:

public class PathMeasureView extends View {

    private static final String TAG = "PathMeasureView";

    private Paint mPaint;
    private Path  mPath;
    private PathMeasure pathMeasure;
    private RectF mRectF;
    private float[] pos;
    private float distance;
    private int radius=20;

    public PathMeasureView(Context context) {
        super(context);
        init(null, 0);
    }

    public PathMeasureView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public PathMeasureView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(20f);
        mPath = new Path();
        pathMeasure = new PathMeasure();
        mRectF = new RectF(300,300,600,600);
        pos = new float[2];
        startMove();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.i(TAG,"onDraw--pos[0]:"+pos[0]+"--pos[1]:"+pos[1]);
        mPath.reset();
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPath.addRect(mRectF, Path.Direction.CW);
        pathMeasure.setPath(mPath, false);
        canvas.drawPath(mPath, mPaint);

        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(pos[0], pos[1], radius, mPaint);
    }

    public void startMove() {
        ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                distance = (float) animation.getAnimatedValue();
                Log.i(TAG,"onAnimationUpdate--distance:"+distance);
                pathMeasure.getPosTan(distance*pathMeasure.getLength(), pos, null);
                //postInvalidate();
                invalidate();
            }
        });
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setDuration(3000);
        animator.start();
    }

}

如果我们将矩形修改为一个圆形:

        //mPath.addRect(mRectF, Path.Direction.CW);
        mPath.addCircle(600,600,300, Path.Direction.CW);

效果如图:
在这里插入图片描述

(5) pathMeasure.getPosTan 实现动画显示一个图片
效果图:
在这里插入图片描述
实现逻辑为:

public class PathMeasureView extends View {

    private static final String TAG = "PathMeasureView";

    private Paint mPaint;
    private Path  mPath;
    private PathMeasure pathMeasure;
    private float[] pos;
    private float[] tan;
    private Bitmap mBitmap;
    private Matrix mMatrix;
    private float distance;

    public PathMeasureView(Context context) {
        super(context);
        init(null, 0,context);
    }

    public PathMeasureView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0,context);
    }

    public PathMeasureView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle,context);
    }

    private void init(AttributeSet attrs, int defStyle,Context context) {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(20f);
        mPath = new Path();
        pathMeasure = new PathMeasure();
        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();
        startMove();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.i(TAG,"onDraw--pos[0]:"+pos[0]+"--pos[1]:"+pos[1]);
        mPath.reset();
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPath.addCircle(600,600,300, Path.Direction.CW);
        pathMeasure.setPath(mPath, false);
        canvas.drawPath(mPath, mPaint);

        mMatrix.reset();
        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.drawBitmap(mBitmap, mMatrix, mPaint);
    }

    public void startMove() {
        ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                distance = (float) animation.getAnimatedValue();
                Log.i(TAG,"onAnimationUpdate--distance:"+distance);
                pathMeasure.getPosTan(distance*pathMeasure.getLength(), pos, tan);
                //postInvalidate();
                invalidate();
            }
        });
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setDuration(3000);
        animator.start();
    }

}

参考资料

1.Android 自定义View学习(十六)——PathMeasure学习
https://www.jianshu.com/p/ac1250bccd3b/
2.安卓自定义View进阶-PathMeasure
https://www.gcssloop.com/customview/Path_PathMeasure
3.PathMeasure之迷径追踪
https://www.jianshu.com/p/3efa5341abcc
4.Android Path测量工具：PathMeasure
https://www.jianshu.com/p/82afb9c2e959?from=jiantop.com

Android自定义View专题五 PathMeasure详解
firea6的博客
11-12 424
PathMeasure系列文章
【Android UI】Path 测量 PathMeasure ④ ( 使用 PathMeasure 绘制沿曲线运动的图像并且其朝向始终向前 | 根据切点计算曲线运动的朝向 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-07 899
一、根据切点计算曲线运动的朝向、 1、getPosTan 函数 ★、 2、根据切点计算曲线运动的朝向、 二、代码示例、 三、运行效果、
对PathMeasure中getPosTan的理解
chuyouyinghe的专栏
03-04 762
考虑这样的场景:要实现物体沿直接或曲线运动的效果.这就要算出某个时刻t,物体的坐标.getPosTan就是用来求坐标的.看下面的代码: float step = 0.0001f; Path path = new Path(); path.moveTo(100, 600); path.cubicTo(400, 200, 700, 300, 800, 700); PathMeasure measure = new PathMeasure(path, false); float len = measure.g
PathMeasure
forward
06-24 1417
PathMeasurePathMeasure是一个用来测量Path的类，主要有以下方法:构造方法 方法名 释义 PathMeasure() 创建一个空的PathMeasure PathMeasure(Path path, boolean forceClosed) 创建 PathMeasure 并关联一个指定的Path(Path需要已经创建完成) 公共方法 返回值 方法名
【Android UI】Path 测量 PathMeasure ② ( PathMeasure API 简介 | nextContour 函数 | getPosTan 函数 ★ | 曲线切线处理 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-02 808
一、PathMeasure API 简介、 1、nextContour 函数、 2、getPosTan 函数 ★、
Android自定义View 使用PathMeasure简单模仿系统ProgressBar（四）
08-31
在Android开发中，自定义View是一项...这个过程不仅展示了PathMeasure的用法，还涵盖了Android自定义View的核心概念，如属性动画、绘制循环和视图生命周期。这样的实践对于提升Android UI设计和动画实现能力非常有益。
Android-Apacmanloadingview(一个吃豆豆的loadingview)
08-12
这个组件通常基于自定义视图（Custom View）的概念，开发者需要继承自Android的View或ViewGroup类，然后重写onDraw()方法来绘制自定义图形。在这个案例中，吃豆人和豆子的动画效果是通过连续地绘制不同的帧来实现的...
Android自定义View图片按Path运动和旋转
08-28
通过本文，我们了解了 Android 自定义 View 图片按 Path 运动和旋转的实现方法和原理，并了解了 Path、PathMeasure 和 ValueAnimator 的使用。同时，我们也了解了如何使用 Matrix 来实现图片的平移旋转操作，以便...
PathMeasure之迷径追踪
eclipse_xu
07-22 1万+
PathMeasure之迷径追踪Path，不论是在自定义View还是动画，都占有举足轻重的地位。绘制Path，可以通过Android提供的API，或者是贝塞尔曲线、数学函数、图形组合等等方式，而要获取Path上每一个构成点的坐标，一般需要知道Path的函数方法，例如求解贝塞尔曲线上的点的De Casteljau算法，但对于一般的Path来说，是很难通过简单的函数方法来进行计算的，那么，如何来定位任意
android高级UI之PathMeasure＜一＞--Path测量基础（nextContour、getPosTan、getMatrix、getSegment）
webor2006的博客
11-04 2589
前言： 在上一次android高级UI之贝塞尔曲线<下>--贝塞尔曲线运用：QQ消息气泡完成了对于贝塞尔曲线绘制的学习，今天准备学习UI绘制中经常会用到的跟Path相关的一些知识，也是很重要，但是你不去专门花时间去研究的话其实理解起来也并不轻松，关于掌握了这个技能之后最终你能做出啥UI效果呢？其实很多，这里先提前把要操练的一个效果贴出来，先来感受一下： 其中圆是使用Paint绘制出来的，而那个箭头是一张静态图片，如果在你没有了解PathMeasure它的使用之前，碰到这样的效果是不是有点
小动画之支付 (PathMeasure)
是非的Android学习之路
08-12 333
利用 PathMeasure 实现路径动画
Android自定义view --Path 的高级用法之-搜索按钮动画
王项雨 的博客
06-07 4952
关于Path之前写的也很多了，例如path绘制线，path绘制一阶，二阶和三阶贝塞尔路径，这些都是path的基本用法。今天我要带大家看的是Path 的高级用法，先上图，再吹。 效果大致是这样的。看着是不是挺好。话不多说，切入正题： 既然今天要谈Path的高级用法，那就先来讲一讲（Path -- 中文 ）就是“路径”既然是路径，从我们面向对象的想法的话，我们就容易想到 路径 的长度，路径的某...
Path&PathMeasure完全解析
花花young
04-16 4554
前言 Path扮演着路径的角色，在绘制View起着非常重要的位置，而PathMeasure是对Path进行测量，通过使用PathMeasure可以更加方便的使用Path工具。网上都好多关于这方面的文章，在这里只是做个笔录，不好不要见怪。嘿嘿 Part 1、谈谈Path的使用
PathMeasure 轨迹动画神器
lmj121212的专栏
05-25 2266
PathMeasure 轨迹动画神器 轨迹动画一般利用SVG来实现，或者使用属性动画，自定义估计值，根据两点之间的线性关系式计算坐标（复杂） 但是使用PathMeasure来进行绘制轨迹动画，so easy。 先看效果： 效果分析： 1、圆圈变成圆弧 2、圆弧不断的变小实现 方式1：通过不断改变绘制圆弧的开始角度。 这个方法肯定是最先想到的方法， 因为api drawA
Android PathMeasure的使用详解
数据结构和算法
10-13 2288
尊重原创，转载请标明出处    http://blog.csdn.net/abcdef314159 在上一篇的Android Path的使用详解中分析了Path类的一些常用的方法，下面顺便看一下和他有关联的一个类PathMeasure，顾名思义，就是测量Path的，来先看一下注释 /** * Create an empty PathMeasure object. To uses
Android高级-PathMeasure详解
u013815832的博客
11-21 759
然后我们来看一下PahtMeasure的源码： 一个是无参数构造，通过setPath设置边的长度 另外一个是直接将serPath传到参数进入 当setPath等于true的时候： 运行结果：日志打印结果为800，表示矩形的长度是800， 当为false的时候，运行结果是： 只获取了三个边的长度： 不管使用哪种构造方法 ，如果对Path进行了调整， ...
使用贝塞尔曲线和Pathmeasure画粘连体
闪电人
08-28 342
public class StickinessView1 extends View { Paint paint; Path path; private PathMeasure mPathMeasure; ValueAnimator valueAnimator; boolean isAnimation; PointF ponitF; float offset
android Path 和 PathMeasure 进阶
热门推荐
文涛的专栏
05-17 1万+
1 概述在前面的路径和文字中，讲解了path的基本用法，这里讲解一些上篇没有讲到的东西。2 Path 这里讲解path相关的方法，后面继续讲解PathMeasure，以及实例(1) offsetpublic void offset(float dx, float dy) public void offset(float dx, float dy, Path dst) 这里两个方法都是指定offset
Android PathMeasure详解与实战应用
"本文主要探讨了Android中的PathMeasure类的详细解释及其应用，旨在帮助开发者更好地理解和使用这一工具。" 在Android开发中，PathMeasure是一个非常实用的类，它允许我们对Path对象进行测量和定位，这对于绘制复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hfreeman2008

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值