1.贝塞尔曲线分析图

贝塞尔.jpg

2.效果图

所有view拖拽.gif

好了，这就是我们今天要写的内容。

3.效果分析

看过我上一篇文章的同学，就知道，我们要画拖拽点，需要画两个点，一个是固定点，一个是拖拽点。
这里的固定点就是view的中心点

 int[] location = new int[2];
                mView.getLocationOnScreen(location);
                Bitmap bitmap = getBitmapByView(mView);
                mDragView.initPoint(location[0] + bitmap.getWidth()/2,location[1] + bitmap.getHeight()/2 - getStatusBarHeight(v.getContext()));

这是初始化的时候要设置的点。拖拽点会随着滑动而移动，然后不断的绘制

 case MotionEvent.ACTION_MOVE:
                mDragView.updatePoint(event.getRawX(),event.getRawY() - getStatusBarHeight(v.getContext()));
                break;

/**
     * 更新座标点
     * @param moveX
     * @param moveY
     */
    public void updatePoint(float moveX, float moveY) {
        mDragPointF.x = moveX;
        mDragPointF.y = moveY;
        invalidate();
    }

不断的取更新试图就可以了。
在绑定试图的时候，创建覆盖view

public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        DragView.bindDragView(findViewById(R.id.tv), new DragViewTouchListener.DragViewListener() {
            @Override
            public void dismiss(View view) {
                Log.d("TAG","dismiss");
            }
        });
        DragView.bindDragView(findViewById(R.id.iv), new DragViewTouchListener.DragViewListener() {
            @Override
            public void dismiss(View view) {
                Log.d("TAG","dismiss");
            }
        });
    }
}

在 DragViewTouchListener 的构造函数里面，通过windowmanager创建可拖拽的view，并保存原始的view

 //记录自己的view
    private View mView;
    private WindowManager mWindowManager;
    //构造的view
    private DragView mDragView;
    private WindowManager.LayoutParams mParams;
    //爆炸容器
    private FrameLayout mBombLayout;
    private ImageView mBombImage;
    private DragViewListener mDragViewListener;

    public DragViewTouchListener(View view, DragViewListener dragViewListener){
        mDragViewListener = dragViewListener;
        mView = view;
        mWindowManager = (WindowManager) view.getContext().getSystemService(Context.WINDOW_SERVICE);
        mDragView = new DragView(view.getContext());
        mDragView.setDragViewCallBackListener(this);
        //全屏拖动
        mParams = new WindowManager.LayoutParams();
        //设置背景透明
        mParams.format = PixelFormat.TRANSLUCENT;
        mBombLayout = new FrameLayout(view.getContext());
        mBombImage = new ImageView(view.getContext());
        mBombLayout.addView(mBombImage);
    }

然后在onTouch事件的 down事件里面 把自己的view隐藏 把拖拽view添加到windowManager中而且要是在原始view的位置。把原始view转中bitmap设置到拖拽view上，这样就看不出来了。

 /**
     * 从一个view中获取bitmap
     * @param mView
     * @return
     */
    private Bitmap getBitmapByView(View mView) {
        mView.buildDrawingCache();
        Bitmap bitmap = mView.getDrawingCache();
        return bitmap;
    }

  /**
     * 设置bitmao
     * @param bitmap
     */
    public void setDragBitmap(Bitmap bitmap) {
        this.mDragBitmap = bitmap;
        invalidate();
    }

4.onDraw 绘制

如果mDragBitmap不空记得绘制这个bitmap

@Override
    protected void onDraw(Canvas canvas) {
        if (mDragPointF == null || mDragPaint == null) {
            return;
        }
        if(this.mDragBitmap != null){
            int width = mDragBitmap.getWidth() > mDragBitmap.getHeight() ? mDragBitmap.getWidth() : mDragBitmap.getHeight();
            mDragRadius = width / 4;
        }
        //画拖拽圆
        canvas.drawCircle(mDragPointF.x, mDragPointF.y, mDragRadius, mDragPaint);

        //画一个固定的圆 根据拖拽距离改固定圆的半径
        canvas.drawCircle(mFixationPointF.x, mFixationPointF.y, mFixationRadius, mFixationPaint);

        Path bezierPath = getBezierPath();
        if(bezierPath != null){
            canvas.drawPath(bezierPath,mFixationPaint);
        }

        if(this.mDragBitmap != null){
            canvas.drawBitmap(mDragBitmap,mDragPointF.x - mDragBitmap.getWidth()/2,mDragPointF.y-mDragBitmap.getHeight()/2,null);
        }
    }

5.绘制贝塞尔曲线的path

/**
    * 获取贝塞尔曲线的 path
    * @return
    */
   private Path getBezierPath(){

       double distance = calculateDistance();

       //比例 这个数可以自己随便定义一个数 比如 14 主要是看效果是否符合自己的效果 测试就知道了
       int bili = mDragRadius;
       mFixationRadius = (int) (mFixationMaxRadius - distance / bili);
       if (mFixationRadius < mFixationMinRadius) {
           return null;
       }
       Path bezierPath = new Path();

       float dy = mDragPointF.y - mFixationPointF.y;
       float dx = mDragPointF.x - mFixationPointF.x;

       float tanA = dy / dx;
       //求角A 反tanA
       double arcTanA = Math.atan(tanA);
       //p0
       float p0x = (float) (mFixationPointF.x + mFixationRadius * Math.sin(arcTanA));
       float p0y = (float)(mFixationPointF.y - mFixationRadius * Math.cos(arcTanA));

       //p1
       float p1x = (float)(mDragPointF.x + mDragRadius * Math.sin(arcTanA));
       float p1y = (float)(mDragPointF.y - mDragRadius * Math.cos(arcTanA));

       //p2
       float p2x = (float)(mDragPointF.x - mDragRadius * Math.sin(arcTanA));
       float p2y = (float)(mDragPointF.y + mDragRadius * Math.cos(arcTanA));

       //p3
       float p3x = (float) (mFixationPointF.x - mFixationRadius * Math.sin(arcTanA));
       float p3y = (float)(mFixationPointF.y + mFixationRadius * Math.cos(arcTanA));

       //拼装 贝塞尔曲线
       bezierPath.moveTo(p0x,p0y);
       //获取控制点座标 定在 两点的中心点
       PointF controllerPointF = getControllerPointF();
       //画第一条
       bezierPath.quadTo(controllerPointF.x,controllerPointF.y,p1x,p1y);
       //画第二条
       bezierPath.lineTo(p2x,p2y);
       bezierPath.quadTo(controllerPointF.x,controllerPointF.y,p3x,p3y);

       bezierPath.close();

       return bezierPath;
   }

6.拖拽view的回弹动画

/**
     * 处理手指松开
     */
    public void handleActionUp() {
        //回弹
        if(mFixationRadius > mFixationMinRadius){
            ValueAnimator animator = ObjectAnimator.ofFloat(1);
            animator.setDuration(350);
            final PointF start = new PointF(mDragPointF.x,mDragPointF.y);
            final PointF end = new PointF(mFixationPointF.x,mFixationPointF.y);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float animatedValue = (float) animation.getAnimatedValue();
                    PointF pointByPercent = getPointByPercent(start, end, animatedValue);
                    updatePoint(pointByPercent.x,pointByPercent.y);
                }
            });
            //差值器 回到原来的位置都向前甩 然后回到原来位置
            animator.setInterpolator(new OvershootInterpolator(3f));
            animator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    if(mDragViewCallBackListener!=null){
                        mDragViewCallBackListener.restore();
                    }
                }
            });
            animator.start();
        }else {
            //爆炸
            if(mDragViewCallBackListener!=null){
                mDragViewCallBackListener.dismiss();
            }
        }
    }

根据三角函数的算法，已知两个点的座标根据移动百分比计算第三个点的座标

 /**
     * 根据百分比计算点的座标
     * @param start
     * @param end
     * @param percent
     * @return
     */
    private PointF getPointByPercent(PointF start,PointF end,float percent){
        return new PointF(evaluateValue(start.x,end.x,percent),evaluateValue(start.y,end.y,percent));
    }
    private float evaluateValue(Number start,Number end,float fraction){
        return start.floatValue() + (end.floatValue() - start.floatValue()) * fraction;
    }

这个可以作为一个工具栏单独拿出来坐记录。

难点也就这么些。有问题随时提问

源码地址：
https://github.com/panshimu/MessageDragView