2. 程式人生 > >Android drawPath實現QQ拖拽泡泡

Android drawPath實現QQ拖拽泡泡

阿新 • • 發佈：2018-12-23

這兩天學習了使用Path繪製貝塞爾曲線相關，然後自己動手做了一個類似QQ未讀訊息可拖拽的小氣泡，效果圖如下：

這裡寫圖片描述

接下來一步一步的實現整個過程。

基本原理

其實就是使用Path繪製三點的二次方貝塞爾曲線來完成那個妖嬈的曲線的。然後根據觸控點不斷繪製對應的圓形，根據距離的改變改變原始固定圓形的半徑大小。最後就是鬆手後返回或者爆裂的實現。

Path介紹：

顧名思義，就是一個路徑的意思，Path裡面有很多的方法，本次設計主要用到的相關方法有

moveTo() 移動Path到一個指定的點
quadTo() 繪製二次貝塞爾曲線，接收兩個點，第一個是控制弧度的點，第二個是終點。
lineTo()

就是連線
close() 閉合Path路徑，
reset() 重置Path的相關設定

  • Path入門熱身：

    path.reset();
path.moveTo(200, 200);
//第一個座標是對應的控制的座標，第二個座標是終點座標
path.quadTo(400, 250, 600, 200);

canvas.drawPath(path, paint);
canvas.translate(0, 200);
//呼叫close,就會首尾閉合連線
path.close();
canvas.drawPath(path, paint);

    記得不要在onDraw方法中new Path或者 Paint喲！

Path

具體實現拆分：

其實整個過程就是繪製了兩個貝塞爾二次曲線的的閉合Path路徑，然後在上面新增兩個圓形。

原理圖1
原理圖2

  • 閉合的Path 路徑實現從左上點畫二次貝塞爾曲線到左下點，左下點連線到右下點，右下點二次貝塞爾曲線到右上點，最後閉合一下!!

  • 相關座標的確定
    這是這次裡面的難點之一，因為涉及到了數學裡面的一個sin,cos,tan等等，我其實也忘完了，然後又腦補了一下，廢話不多說，直接上圖！！
    旋轉過程的角標

為什麼自己要親自去畫一下呢，因為畫了你才知道，在360旋轉的過程中，角標體系是有兩套的，如果就使用一套來畫的話，就畫出現在旋轉的過程中曲線重疊在一起的情況！

問題已經丟擲來了，接下來直接看看程式碼實現！

角度確定

根據貼出來的原理圖可以知道，我們可以使用起始圓心座標和拖拽的圓心座標，根據反正切函式來得到具體的弧度。

int dy = Math.abs(CIRCLEY - startY);
int dx = Math.abs(CIRCLEX - startX);
 angle = Math.atan(dy * 1.0 / dx);

ok,這裡的startX,Y就是移動過程中的座標。angle就是得到的對應的弧度（角度）。

相關Path繪製

前面已經提到在旋轉的過程中有兩套座標體系，一開始我也很糾結這個座標體系要怎麼確定，後面又恍然大悟，其實相當於就是一三象限正比例增長，二四象限，反比例增長。

 flag = (startY - CIRCLEY  ) * (startX- CIRCLEX ) <= 0;
 //增加一個flag,用於判斷使用哪種座標體系。

最最重要的來了，繪製相關的Path路徑！

 path.reset();
 if (flag) {
     //第一個點
 path.moveTo((float) (CIRCLEX - Math.sin(angle) * ORIGIN_RADIO), (float) (CIRCLEY - Math.cos(angle) * ORIGIN_RADIO));

 path.quadTo((float) ((startX + CIRCLEX) * 0.5), (float) ((startY + CIRCLEY) * 0.5), (float) (startX - Math.sin(angle) * DRAG_RADIO), (float) (startY - Math.cos(angle) * DRAG_RADIO));
path.lineTo((float) (startX + Math.sin(angle) * DRAG_RADIO), (float) (startY + Math.cos(angle) * DRAG_RADIO));

path.quadTo((float) ((startX + CIRCLEX) * 0.5), (float) ((startY + CIRCLEY) * 0.5), (float) (CIRCLEX + Math.sin(angle) * ORIGIN_RADIO), (float) (CIRCLEY + Math.cos(angle) * ORIGIN_RADIO));
path.close();
canvas.drawPath(path, paint);
 } else {
     //第一個點
     path.moveTo((float) (CIRCLEX - Math.sin(angle) * ORIGIN_RADIO), (float) (CIRCLEY + Math.cos(angle) * ORIGIN_RADIO));

     path.quadTo((float) ((startX + CIRCLEX) * 0.5), (float) ((startY + CIRCLEY) * 0.5), (float) (startX - Math.sin(angle) * DRAG_RADIO), (float) (startY + Math.cos(angle) * DRAG_RADIO));
     path.lineTo((float) (startX + Math.sin(angle) * DRAG_RADIO), (float) (startY - Math.cos(angle) * DRAG_RADIO));

     path.quadTo((float) ((startX + CIRCLEX) * 0.5), (float) ((startY + CIRCLEY) * 0.5), (float) (CIRCLEX + Math.sin(angle) * ORIGIN_RADIO), (float) (CIRCLEY - Math.cos(angle) * ORIGIN_RADIO));
     path.close();
     canvas.drawPath(path, paint);
 }

這裡的程式碼就是把圖片上相關的數學公式Java化而已！

到這裡，其實主要的工作就完成的差不多了！
接下來，設定paint 為填充的效果,最後再畫兩個圓

 paint.setStyle(Paint.Style.FILL)
 canvas.drawCircle(CIRCLEX, CIRCLEY, ORIGIN_RADIO, paint);//預設的
 canvas.drawCircle(startX == 0 ? CIRCLEX : startX, startY == 0 ? CIRCLEY : startY, DRAG_RADIO, paint);//拖拽的

就可以繪製出想要的效果了！

這裡不得不再說說onTouch的處理！

  case MotionEvent.ACTION_DOWN://有事件先攔截再說！！
            getParent().requestDisallowInterceptTouchEvent(true);
            CurrentState = STATE_IDLE;
            animSetXY.cancel();
            startX = (int) ev.getX();
            startY = (int) ev.getRawY();
            break;

處理一下事件分發的坑！

測量和佈局

這樣基本過得去了，但是我們的佈局什麼的還沒有處理，math_parent是萬萬沒法使用到具體專案當中去的！
測量的時候，如果發現不是精準模式，那麼都手動去計算出需要的寬度和高度。

 @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
    int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
    if (modeWidth == MeasureSpec.UNSPECIFIED || modeWidth == MeasureSpec.AT_MOST) {
        widthMeasureSpec = MeasureSpec.makeMeasureSpec(DEFAULT_RADIO * 2, MeasureSpec.EXACTLY);
    }
    if (modeHeight == MeasureSpec.UNSPECIFIED || modeHeight == MeasureSpec.AT_MOST) {
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(DEFAULT_RADIO * 2, MeasureSpec.EXACTLY);
    }
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

然後在佈局變化時，獲取相關座標，確定初始圓心座標：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    CIRCLEX = (int) ((w) * 0.5 + 0.5);
    CIRCLEY = (int) ((h) * 0.5 + 0.5);
}

然後清單檔案裡面就可以這樣配置了：

 <com.lovejjfg.circle.DragBubbleView
    android:id="@+id/dbv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"/>

這樣之後，又會出現一個問題，那就是wrap_content 之後，這個View能繪製的區域只有自身那麼大了，拖拽了都看不見了！這個坑怎麼辦呢，其實很簡單，父佈局加上android:clipChildren="false" 的屬性！
這個坑也算是解決了！！

相關狀態的確定

我們是不希望它可以無限的拖拽的，就是有一個拖拽的最遠距離，還有就是放手後的返回，爆裂。那麼對應的，這裡需要確定幾種狀態：

  private final static int STATE_IDLE = 1;//靜止的狀態
    private final static int STATE_DRAG_NORMAL = 2;//正在拖拽的狀態
    private final static int STATE_DRAG_BREAK = 3;//斷裂後的拖拽狀態
    private final static int STATE_UP_BREAK = 4;//放手後的爆裂的狀態
    private final static int STATE_UP_BACK = 5;//放手後的沒有斷裂的返回的狀態
    private final static int STATE_UP_DRAG_BREAK_BACK = 6;//拖拽斷裂又返回的狀態
    private int CurrentState = STATE_IDLE;

private int MIN_RADIO = (int) (ORIGIN_RADIO * 0.4);//最小半徑
    private int MAXDISTANCE = (int) (MIN_RADIO * 13);//最遠的拖拽距離

確定好這些之後，在move的時候，就要去做相關判斷了：

  case MotionEvent.ACTION_MOVE://移動的時候
            startX = (int) ev.getX();
            startY = (int) ev.getY();

            updatePath();
            invalidate();
            break;

private void updatePath() {
    int dy = Math.abs(CIRCLEY - startY);
    int dx = Math.abs(CIRCLEX - startX);

    double dis = Math.sqrt(dy * dy + dx * dx);
    if (dis <= MAXDISTANCE) {//增加的情況，原始半徑減小
        if (CurrentState == STATE_DRAG_BREAK || CurrentState == STATE_UP_DRAG_BREAK_BACK) {
            CurrentState = STATE_UP_DRAG_BREAK_BACK;
        } else {
            CurrentState = STATE_DRAG_NORMAL;
        }
        ORIGIN_RADIO = (int) (DEFAULT_RADIO - (dis / MAXDISTANCE) * (DEFAULT_RADIO - MIN_RADIO));
        Log.e(TAG, "distance: " + (int) ((1 - dis / MAXDISTANCE) * MIN_RADIO));
        Log.i(TAG, "distance: " + ORIGIN_RADIO);
    } else {
        CurrentState = STATE_DRAG_BREAK;
    }
//        distance = dis;
    flag = (startY - CIRCLEY) * (startX - CIRCLEX) <= 0;
    Log.i("TAG", "updatePath: " + flag);
    angle = Math.atan(dy * 1.0 / dx);
}

updatePath() 的方法之前已經看過部分了，這次的就是完整的。
這裡做的事就是根據拖拽的距離更改相關的狀態，並根據百分比來修改原始圓形的半徑大小。還有就是之前介紹的確定相關的弧度！

最後放手的時候：

   case MotionEvent.ACTION_UP:
            if (CurrentState == STATE_DRAG_NORMAL) {
                CurrentState = STATE_UP_BACK;
                valueX.setIntValues(startX, CIRCLEX);
                valueY.setIntValues(startY, CIRCLEY);
                animSetXY.start();
            } else if (CurrentState == STATE_DRAG_BREAK) {
                CurrentState = STATE_UP_BREAK;
                invalidate();
            } else {
                CurrentState = STATE_UP_DRAG_BREAK_BACK;
                valueX.setIntValues(startX, CIRCLEX);
                valueY.setIntValues(startY, CIRCLEY);
                animSetXY.start();
            }
            break;

自動返回這裡使用到的 ValueAnimator，

 animSetXY = new AnimatorSet();

    valueX = ValueAnimator.ofInt(startX, CIRCLEX);
    valueY = ValueAnimator.ofInt(startY, CIRCLEY);
    animSetXY.playTogether(valueX, valueY);
    valueX.setDuration(500);
    valueY.setDuration(500);
    valueX.setInterpolator(new OvershootInterpolator());
    valueY.setInterpolator(new OvershootInterpolator());
    valueX.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            startX = (int) animation.getAnimatedValue();
            Log.e(TAG, "onAnimationUpdate-startX: " + startX);
            invalidate();
        }

    });
    valueY.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            startY = (int) animation.getAnimatedValue();
            Log.e(TAG, "onAnimationUpdate-startY: " + startY);
            invalidate();

        }
    });

最後在看看完整的onDraw方法吧！

 @Override
protected void onDraw(Canvas canvas) {
    switch (CurrentState) {
        case STATE_IDLE://空閒狀態，就畫預設的圓
            if (showCircle) {
                canvas.drawCircle(CIRCLEX, CIRCLEY, ORIGIN_RADIO, paint);//預設的
            }
            break;
        case STATE_UP_BACK://執行返回的動畫
        case STATE_DRAG_NORMAL://拖拽狀態 畫貝塞爾曲線和兩個圓
            path.reset();
            if (flag) {
                //第一個點
                path.moveTo((float) (CIRCLEX - Math.sin(angle) * ORIGIN_RADIO), (float) (CIRCLEY - Math.cos(angle) * ORIGIN_RADIO));

                path.quadTo((float) ((startX + CIRCLEX) * 0.5), (float) ((startY + CIRCLEY) * 0.5), (float) (startX - Math.sin(angle) * DRAG_RADIO), (float) (startY - Math.cos(angle) * DRAG_RADIO));
                path.lineTo((float) (startX + Math.sin(angle) * DRAG_RADIO), (float) (startY + Math.cos(angle) * DRAG_RADIO));

                path.quadTo((float) ((startX + CIRCLEX) * 0.5), (float) ((startY + CIRCLEY) * 0.5), (float) (CIRCLEX + Math.sin(angle) * ORIGIN_RADIO), (float) (CIRCLEY + Math.cos(angle) * ORIGIN_RADIO));
                path.close();
                canvas.drawPath(path, paint);
            } else {
                //第一個點
                path.moveTo((float) (CIRCLEX - Math.sin(angle) * ORIGIN_RADIO), (float) (CIRCLEY + Math.cos(angle) * ORIGIN_RADIO));

                path.quadTo((float) ((startX + CIRCLEX) * 0.5), (float) ((startY + CIRCLEY) * 0.5), (float) (startX - Math.sin(angle) * DRAG_RADIO), (float) (startY + Math.cos(angle) * DRAG_RADIO));
                path.lineTo((float) (startX + Math.sin(angle) * DRAG_RADIO), (float) (startY - Math.cos(angle) * DRAG_RADIO));

                path.quadTo((float) ((startX + CIRCLEX) * 0.5), (float) ((startY + CIRCLEY) * 0.5), (float) (CIRCLEX + Math.sin(angle) * ORIGIN_RADIO), (float) (CIRCLEY - Math.cos(angle) * ORIGIN_RADIO));
                path.close();
                canvas.drawPath(path, paint);
            }
            if (showCircle) {
                canvas.drawCircle(CIRCLEX, CIRCLEY, ORIGIN_RADIO, paint);//預設的
                canvas.drawCircle(startX == 0 ? CIRCLEX : startX, startY == 0 ? CIRCLEY : startY, DRAG_RADIO, paint);//拖拽的
            }
            break;

        case STATE_DRAG_BREAK://拖拽到了上限，畫拖拽的圓:
        case STATE_UP_DRAG_BREAK_BACK:
            if (showCircle) {
                canvas.drawCircle(startX == 0 ? CIRCLEX : startX, startY == 0 ? CIRCLEY : startY, DRAG_RADIO, paint);//拖拽的
            }
            break;

        case STATE_UP_BREAK://畫出爆裂的效果
            canvas.drawCircle(startX - 25, startY - 25, 10, circlePaint);
            canvas.drawCircle(startX + 25, startY + 25, 10, circlePaint);
            canvas.drawCircle(startX, startY - 25, 10, circlePaint);
            canvas.drawCircle(startX, startY, 18, circlePaint);
            canvas.drawCircle(startX - 25, startY, 10, circlePaint);
            break;

    }


}

到這裡，成品就出來了！！

總結：

1、確定預設圓形的座標；
2、根據move的情況，實時獲取最新的座標，根據移動的距離（確定出角度），更新相關的狀態，畫出相關的Path路徑。超出上限，不再畫Path路徑。
3、鬆手時，根據相關的狀態，要麼帶Path路徑執行動畫返回，要麼不帶Path路徑直接返回，要麼直接爆裂！

相關原始碼請移步Github，喜歡就請粉一個吧，有問題歡迎留言或者issue。。

相關推薦

Android drawPath實現QQ拖拽泡泡

這兩天學習了使用Path繪製貝塞爾曲線相關，然後自己動手做了一個類似QQ未讀訊息可拖拽的小氣泡，效果圖如下： 接下來一步一步的實現整個過程。 基本原理 其實就是使用Path繪製三點的二次方貝塞爾曲線來完成那個妖嬈的曲線的。然後根據觸控點不斷繪製對應

Android實現可拖拽的懸浮框

前言：   最近遇到一個開發需求，機器人在使用ASR(語音識別)時，需要將使用者說的話，在機器人胸前的互動螢幕上展示出來，也就是展示出相應的字幕。關鍵有一個要求就是可將字幕進行拖拽。。。(怎麼樣，這個需求夠變態吧，雖從正常互動的角度認為這樣完全沒必要，並簡單交涉了下，結果很無奈，你懂得。

Android 使用變形矩陣實現可以拖拽，縮放，旋轉的影象

上篇博文介紹了變形矩陣的一些用法，所以這篇博文就結合變形矩陣來實現一個可以拖拽、縮放、旋轉的影象吧。 首先，我們就繼承ImageView來實現我們的自定義View。 程式碼如下： public class MyMatrixImg extends Ima

iOS 未讀消息角標 仿QQ拖拽 簡單靈活 支持xib(源碼)

float 簡單用法 賦值 sta navi 適應 bool isa class 一、效果 二、簡單用法 超級簡單，2行代碼集成；xib可0代碼集成，只需拖一個view關聯LFBadge類即可 支持pod導入pod ‘LFKit/LFBadge‘ //一般view上加角

Android 自定義可拖拽View，界面渲染刷新後不會自動回到起始位置

AD att starty attrs floating blog body .get dmi 以自定義ImageView為例： /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class

js仿QQ拖拽刪除

gid 移動端 pla uic innerhtml prevent [] idt ati 原生js實現仿QQ拖拽刪除交互，無需任何依賴。 項目演示請看這裏， gitHub請移步這裏。 由於源碼很長，所以貼到最下面了。 效果截圖如下： 核心思想呢，就是點擊圓點的

實現可拖拽移動的懸浮按鈕

前言： 　　最近想要實現一個可拖拽移動的FAB按鈕，這裡記錄一下個人的思路與經驗。 如何監聽FAB按鈕的移動？ 　　我們可以實現View.OnTouchListener介面，在onTouch( )方法中獲取FAB按鈕移動時的位置引數。或者可以選擇複寫View自身的onT

基於Vue實現可以拖拽排序的樹形表格

專案需要一個可以拖拽排序的樹形表格，github上搜了一下，併為找到，大部分都不支援拖拽，所以自己實現了一個簡單的元件，已開源 原始碼在這裡，併發布到npm上，如果有類似需求可以試一下，chrome上沒有任何問題 效果圖如下： drag-tree-table 使用方式

Android 個人相簿圖片拖拽排序

效果圖如下： 具體核心程式碼： private ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.Callback() { @Override public int ge

【JavaScript】實現元素拖拽和碰撞檢測

function drag() { var src1 = document.getElementById("src-1"); var src2 = document.getElementById("src-2"); var src3 =

基於Vue實現可以拖拽的樹形表格（原創）

　　因業務需求，需要一個樹形表格，並且支援拖拽排序，任意未知插入，github搜了下，真不到合適的，大部分樹形表格都沒有拖拽功能，所以決定自己實現一個。這裡分享一下實現過程，專案原始碼請看github，外掛已打包封裝好，釋出到npm上　 本博文會分為兩部分，第一部分為使用方式，第二部分為實現方式 安裝方式

RecyclerView實現條目拖拽，左滑、右滑移除效果

對於android開發者來說RecyclerView應該已經很熟悉了，專案中基本都是使用RecyclerView來實現列表效果，這裡要實現的是RecyclerView的條目拖拽、左滑、右滑移除效果，這些效果都是在RecyclerView列表基礎上來實現的，所以還是先簡單的實現RecyclerVi

js實現簡單拖拽案例

簡單拖拽事件主要是監聽三個事件：onmousedown, onmousemove, onmouseup 三個事件，思路也很簡單，但是寫的時候還是遇到了一些小問題，先放程式碼： <!DOCTYPE html> <html lang="en"> <head>

bootstrap-table實現 行拖拽 的簡單操作

引用 jquery.tablednd.js bootstrap-table-reorder-rows.js 拖拽前原始表 拖拽使用後 程式碼如下,寫在cshtml檔案裡,<table>標籤也僅需加上 data-use-row-attr-func

使用angular-ui-sortable實現可拖拽排序列表

                     專案需求，新增列表可拖拽排序功能，谷歌了一下，找到一個Angular的外掛：angular-ui-sortable，專案地址：https://github.com/angular-ui/ui-sortable需要在之前引入jquery，和jquery-ui，否則無法使

Recyclerview實現網格拖拽排序

門禁列表排序 需求效果是：前兩行是常用門禁，黃色顯示，之後是普通門，白色顯示。按住一個門時，除了被按住的門，其他門抖動，被按住門加陰影。常用門和普通門交換位置時，開啟漸變動畫。 演示：

JavaScript 在vue頁面下實現滑鼠拖拽div改變其大小，適用於鷹眼地圖，街景地圖等。

首先看效果，如圖，滑鼠懸浮在地圖的右上角小框中時，提示“拖動調整大小”，可以給小框加個好看的圖示。點選可以進行拖拽。 基於上一篇部落格：https://blog.csdn.net/acoolgiser/article/details/84866426  實現。 程式碼：

【前端】js+php實現圖片拖拽上傳

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽圖片上傳</title> </head> <body>

使用AJAX實現檔案拖拽上傳功能詳解

概述 對於微雲、百度雲等網盤提供的檔案儲存服務而言，檔案上傳是一個重要功能。檔案上傳的方式主要有兩種：二進位制資料上傳、表單上傳。本文會詳細解析表單上傳的協議規範，前端上傳檔案的兩種方式：對話方塊選擇方式、拖拽選擇方式，服務端接收上傳的檔案以及檔案上傳

動態配置模組實現模組拖拽效果

需要用到js，gridster html程式碼如下<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Gener