安卓PathMeasure的简单用法

本是古典何须时尚 2022-06-15 07:50 220阅读 0赞

## 安卓PathMeasure的简单用法 ##

Path可以按照路径画出很多效果，而使用pathMeasure可以对path进行测量，或者找到某个点具体位置等。

使用pathMeasure实现如下效果  
![这里写图片描述][SouthEast]  
思路：  
1.首先使用path画出桃心路径  
2.接着使用pathMeasure获取该点的Matrix  
3.将图片画到对应的matrix上，再使用属性动画不断更新视图

画出桃心路径

// 起始点
        private static final int[] START_POINT = new int[] {
                300, 270
        };
        // 爱心下端点
        private static final int[] BOTTOM_POINT = new int[] {
                300, 400
        };
        // 左侧控制点
        private static final int[] LEFT_CONTROL_POINT = new int[] {
                450, 200
        };
        // 右侧控制点
        private static final int[] RIGHT_CONTROL_POINT = new int[] {
                150, 200
        };
    
      @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPath.reset();
    
            canvas.translate(0,200);
            mPath.moveTo(START_POINT[0], START_POINT[1]);
            mPath.quadTo(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], BOTTOM_POINT[0],
                    BOTTOM_POINT[1]);
            mPath.quadTo(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], START_POINT[0], START_POINT[1]);
            mPathMeasure.setPath(mPath,true);
            canvas.drawPath(mPath,mPaint);
    
    
        }

这些点直接从demo中找来的，可以去画贝塞尔曲线的网站模拟一下

接着画箭头图片，其实也很简单

float length = mPathMeasure.getLength();
            mPathMeasure.getMatrix(length*mFraction,mMatrix,TANGENT_MATRIX_FLAG|POSITION_MATRIX_FLAG);
            mMatrix.preTranslate(-androidBitmap.getWidth()/2,-androidBitmap.getHeight()/2);
            canvas.drawBitmap(androidBitmap,mMatrix,mPaint);

首先使用pathmeasure获取路径该点的Martix，然后前移动图片的宽度和高度，就可以直接使用了，这种方式少了很多计算。

完整代码

public class PathArray extends View {
        
        private Path mPath;
        private Paint mPaint;
        private PathMeasure mPathMeasure;
        private Bitmap androidBitmap;
        private float mFraction=0f;
        private Matrix mMatrix;
    
    
        // 起始点
        private static final int[] START_POINT = new int[] {
                300, 270
        };
        // 爱心下端点
        private static final int[] BOTTOM_POINT = new int[] {
                300, 400
        };
        // 左侧控制点
        private static final int[] LEFT_CONTROL_POINT = new int[] {
                450, 200
        };
        // 右侧控制点
        private static final int[] RIGHT_CONTROL_POINT = new int[] {
                150, 200
        };
    
    
        public PathArray(Context context) {
            super(context);
            init();
        }
    
    
        private void init() {
            mPath=new Path();
            mPaint=new Paint();
            mMatrix=new Matrix();
            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);
            mPathMeasure=new PathMeasure();
            BitmapFactory.Options options=new BitmapFactory.Options();
            options.inSampleSize=16;
            androidBitmap= BitmapFactory.decodeResource(getResources(),R.drawable.ic_array,options);
        }
    
        public PathArray(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
        }
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPath.reset();
            mMatrix.reset();
            canvas.translate(0,200);
            mPath.moveTo(START_POINT[0], START_POINT[1]);
            mPath.quadTo(RIGHT_CONTROL_POINT[0], RIGHT_CONTROL_POINT[1], BOTTOM_POINT[0],
                    BOTTOM_POINT[1]);
            mPath.quadTo(LEFT_CONTROL_POINT[0], LEFT_CONTROL_POINT[1], START_POINT[0], START_POINT[1]);
            mPathMeasure.setPath(mPath,true);
            canvas.drawPath(mPath,mPaint);
            float length = mPathMeasure.getLength();
            mPathMeasure.getMatrix(length*mFraction,mMatrix,TANGENT_MATRIX_FLAG|POSITION_MATRIX_FLAG);
            mMatrix.preTranslate(-androidBitmap.getWidth()/2,-androidBitmap.getHeight()/2);
            canvas.drawBitmap(androidBitmap,mMatrix,mPaint);
        }
        public void startAnim(){
            ValueAnimator animator=ValueAnimator.ofFloat(0,1);
            animator.setDuration(5000);
            animator.setInterpolator(new LinearInterpolator());
            animator.setRepeatCount(ValueAnimator.INFINITE);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mFraction  = (float) animation.getAnimatedValue();
                    postInvalidate();
                }
            });
            animator.start();
        }
    
    }

[SouthEast]: /images/20220615/64b43a5462e346a1be077d3bb6988b05.png