貝塞爾曲線 QQ消息汽包拖拽

1.概述

---

消息氣泡拖拽資料有不少，網上也有開源代碼，下載下來就能夠用。爲何還要折騰呢？我想證實一下數學已經初中畢業，其次像貝塞爾這種效果仍是很常見的，雖然目前我只有一個 APP 用了這個效果。我想一行代碼讓全部的控件均可以拖動爆炸，不是爲了重複造輪子而是爲了裝B。

2．效果實現

---

** 2.1 效果分析 **

看上面的效果感受有點麻煩，怎麼作到任何控件均可以拖動爆炸，我想說網上應該僅此一家。首先能夠不要搞得這麼麻煩，好比我再上一張圖片看下：

上面這個效果就比較簡單了，先分析一下實現方式。我手指在任何一個位置觸摸拖動都會是如上圖的這個樣式，這個實現的起來就相對簡單許多了：

2.1.1: 手指按下拖動的時候有一個拖拽的圓這個圓的半徑是不會變化的可是位置會隨着手指移動； 2.1.2: 手指按下拖動的時候有一個固定的圓這個圓的是會變化的可是位置不會變化，圓的半徑取決於兩個圓的距離，兩個圓的距離越大圓半徑越小，距離越小圓半徑越大； 2.1.2: 兩個圓之間有一個不規則的東西將兩個圓連在一塊兒感受像粘液同樣，這就是你們所說的貝塞爾效果。

2.2 效果實現

2.2.1: 監聽觸摸繪製兩個圓 咱們先挑簡單的寫，首先監聽手指觸摸不斷的繪製兩個圓（固定圓和拖拽圓），若是對觸摸監聽事件以及畫筆使用不是特別熟悉，請留意看看我以前的一些自定義 View 的文章。Android進階之旅 - 自定義View篇

/**
 * description: 消息氣泡拖拽的 View
 * author: Darren on 2017/7/21 10:40
 * email: 240336124@qq.com
 * version: 1.0
 */
public class MessageBubbleView extends View {
    // 拖拽圓的圓心點
    private PointF mDragPoint;
    // 固定圓的圓心點
    private PointF mFixationPoint;
    // 拖拽圓的半徑
    private int mDragRadius = 10;
    // 固定圓的半徑
    private int mFixationRadius = 7;
    // 固定圓的最小半徑
    private int FIXATION_RADIUS_MIN = 3;
    // 固定圓的最大半徑
    private int FIXATION_RADIUS_MAX = 7;
    // 用來繪製的畫筆
    private Paint mPaint;

    public MessageBubbleView(Context context) {
        this(context, null);
    }

    public MessageBubbleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MessageBubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 初始化畫筆
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        // 初始化一些距離
        mDragRadius = dip2px(mDragRadius);
        mFixationRadius = dip2px(mFixationRadius);
        FIXATION_RADIUS_MIN = dip2px(FIXATION_RADIUS_MIN);
        FIXATION_RADIUS_MAX = dip2px(FIXATION_RADIUS_MAX);
    }

    private int dip2px(int dip) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dip,getResources().getDisplayMetrics());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mDragPoint == null && mFixationPoint == null) {
            return;
        }

        // 1.繪製拖拽圓
        canvas.drawCircle(mDragPoint.x, mDragPoint.y, mDragRadius, mPaint);

        // 計算兩個圓之間的距離
        int distance = BubbleUtils.getDistance(mDragPoint, mFixationPoint);

        // 計算固定圓的半徑，距離越大圓半徑越小
        mFixationRadius = FIXATION_RADIUS_MAX - distance / 14;

        if (mFixationRadius > FIXATION_RADIUS_MIN) {
            // 2.繪製固定圓
            canvas.drawCircle(mFixationPoint.x, mFixationPoint.y, mFixationRadius, mPaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                initPoint(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                updateDragPoint(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_UP:

                break;
        }
        invalidate();
        return true;
    }

    /**
     * 更新拖拽圓的位置
     *
     * @param x
     * @param y
     */
    private void updateDragPoint(float x, float y) {
        mDragPoint.x = x;
        mDragPoint.y = y;
    }

    /**
     * 初始化圓的位置
     *
     * @param x
     * @param y
     */
    private void initPoint(float x, float y) {
        mDragPoint = new PointF(x, y);
        mFixationPoint = new PointF(x, y);
    }
}
複製代碼

2.2.2: 繪製貝塞爾曲線

貝塞爾曲線繪製起來有點小麻煩，我沒記錯的話是初中的數學知識，若是你不是特別瞭解貝塞爾曲線和三角函數能夠百度一下，這裏給兩個連接 貝塞爾曲線 和 三角函數 文章中我就不作過多的解釋，下面講一下求解思路：

　　   看上面這張圖畫得不咋地但純手工，藍色部分和黑色部分是已知，黃色部分是輔助線是能夠利用三角公式求出來的，紅色部分是未知。咱們只要求得角 a，有了角 a 咱們就能求 x 和 y 這樣咱們就知道了 p0 的位置，依葫蘆畫瓢求能求得 p0,p1,p2,p3的值，有了四個點有了控制點天然就能畫貝塞爾曲線了。

/**
     * 獲取 Bezier 曲線
     *
     * @return
     */
    public Path getBezierPath() {
        if (mFixationRadius < FIXATION_RADIUS_MIN) {
            return null;
        }

        Path bezierPath = new Path();
        // 貝塞爾曲線怎麼求？

        // 計算斜率
        float dx = mFixationPoint.x - mDragPoint.x;
        float dy = mFixationPoint.y - mDragPoint.y;
        if (dx == 0) {
            dx = 0.001f;
        }
        float tan = dy / dx;
        // 獲取角a度值
        float arcTanA = (float) Math.atan(tan);

        // 依次計算 p0 , p1 , p2 , p3 點的位置
        float P0X = (float) (mFixationPoint.x + mFixationRadius * Math.sin(arcTanA));
        float P0Y = (float) (mFixationPoint.y - mFixationRadius * Math.cos(arcTanA));

        float P1X = (float) (mDragPoint.x + mDragRadius * Math.sin(arcTanA));
        float P1Y = (float) (mDragPoint.y - mDragRadius * Math.cos(arcTanA));

        float P2X = (float) (mDragPoint.x - mDragRadius * Math.sin(arcTanA));
        float P2Y = (float) (mDragPoint.y + mDragRadius * Math.cos(arcTanA));

        float P3X = (float) (mFixationPoint.x - mFixationRadius * Math.sin(arcTanA));
        float P3Y = (float) (mFixationPoint.y + mFixationRadius * Math.cos(arcTanA));
        // 求控制點 兩個點的中心位置做爲控制點
        PointF controlPoint = BubbleUtils.getPointByPercent(mDragPoint, mFixationPoint, 0.5f);

        // 整合貝塞爾曲線路徑
        bezierPath.moveTo(P0X, P0Y);
        bezierPath.quadTo(controlPoint.x, controlPoint.y, P1X, P1Y);
        bezierPath.lineTo(P2X, P2Y);
        bezierPath.quadTo(controlPoint.x, controlPoint.y, P3X, P3Y);
        bezierPath.close();

        return bezierPath;
    }
複製代碼

下一節咱們來實現一下如何可以讓任何一個 View 都能拖動消失，就像 QQ 的消息氣泡同樣，固然到時可能又免不了源碼分析。

全部分享大綱：Android進階之旅 - 自定義View篇

視頻講解地址：http://pan.baidu.com/s/1nvNZSTV