2. 程式人生 > >Android自定義View之使用Path繪製手勢軌跡和水波效果

Android自定義View之使用Path繪製手勢軌跡和水波效果

阿新 • • 發佈：2019-02-07

先看下效果圖：
path.gif

ripple.gif

繪製軌跡

繪製手指的軌跡主要是攔截View的onTouchEvent()方法，並根據手指的軌跡繪製path。path中有兩種可以實現的方法

1、Path.lineTo(x,y)方法
public class MovePathView extends View {

    private Path mPath;
    private Paint mPaint;
    //手指按下的位置
    private float startX,startY;

    public MovePathView(Context context) {
        super
 
(context);
        init();
    }
    //初始化
    private void init() {
        mPaint = new Paint();
        mPath = new Path();
        mPaint.setColor(Color.BLUE);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4);
    }

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

    public MovePathView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }



    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch
 
 (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                startX = event.getX();
                startY = event.getY();
                //設定原點
                mPath.moveTo(startX,startY);
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                float currX = event.getX();
                float currY = event.getY();
                //連線
                mPath.lineTo(currX,currY);
                //重新整理view
                invalidate();
                break;

        }
        //返回true，消費事件
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath,mPaint);
    }
    //對外提供的方法，重新繪製
    public void reset(){
        mPath.reset();
        invalidate();
    }

}

這裡面需要知道的應該就3個點：
- View的座標系
- View的事件分發
- Path的moveTo()，lineTo()方法

2、使用Path.quadTo()繪製曲線
public class MoveQuatoView extends View {

    private Paint mPaint;
    private Path mPath;
    //上個位置
    private float mPreX,mPreY;
    //結束位置
    private float endY,endX;

    public MoveQuatoView(Context context) {
        super(context);
        init();
    }

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

    public MoveQuatoView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    //初始化
    private void init() {
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(5);
        mPaint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath,mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(event.getX(), event.getY());
                mPreX = event.getX();
                mPreY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                endX = (mPreX + event.getX()) / 2;
                endY = (mPreY + event.getY()) / 2;
                mPath.quadTo(mPreX, mPreY, endX, endY);
                mPreX = event.getX();
                mPreY = event.getY();
                invalidate();
            break;
        }
        return true;
    }
}

上面一段程式碼為了取得平滑的效果，所以endX和endY都只取了直線的中間部分。

水波紋效果

水波紋主要用到了Path.rQuadTo()方法。
rQuadTo()也是繪製曲線的一個方法。
image.png

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

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);

        Path path = new Path();
        path.moveTo(100,300);
        /**
           rQuadTo(float dx1, float dy1, float dx2, float dy2)  
           dx1:控制點X座標，表示相對上一個終點X座標的位移座標，可為負值，正值表示相加，負值表示相減；
           dy1:控制點Y座標，相對上一個終點Y座標的位移座標。同樣可為負值，正值表示相加，負值表示相減；
           dx2:終點X座標，同樣是一個相對座標，相對上一個終點X座標的位移值，可為負值，正值表示相加，負值表示相減；
           dy2:終點Y座標，同樣是一個相對，相對上一個終點Y座標的位移值。可為負值，正值表示相加，負值表示相減；
         */
        path.rQuadTo(100,-100,200,0);
        path.rQuadTo(100,100,200,0);

        canvas.drawPath(path,paint);

    }

上面程式碼總共有兩個rQuadTo()方法。
第一個path.rQuadTo(100,-100,200,0);
起始點：(100,300)
控制點座標:(200,200)，X：200=100+100，Y: 200 = 300-100
終點座標: (300,300)， X ：300=100+200，Y:300 = 300+0
效果是：![image2.png](http://upload-images.jianshu.io/upload_images/2729169-8a82e6e36cd5cf8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
第二個 path.rQuadTo(100,100,200,0);`
此時的起始點座標也就是第一個的終點座標，所以
起始點座標:(300,300)
控制點座標:(400,400)，X: 400 = 300+100，Y:400 = 300+100
終點座標： (500,300)，X: 500 = 300+200，Y:300 = 300+0
同理，如果有第三個path.rQuadTo，那麼第三個的起始點也就是上一個的終點(500,300)

搞清楚了path.rQuadTo()方法的用法就可以去實現水波紋的效果了。

public class RippleView extends View {

    private Paint mPaint;
    private Path mPath;
    //波紋的寬度
    private int mItemWaveLength = 1000;
    //波紋每次移動的距離
    private int dx;

    public RippleView(Context context) {
        super(context);
        init();
    }

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

    public RippleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    //初始化
    private void init(){
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setStrokeWidth(5);
        mPaint.setAntiAlias(true);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //移動後,重置mPath，將之前路徑清空
        mPath.reset();
        //距離頂部的高度
        int originY = 600;
        //波紋寬度的一般
        int halfWaveLen = mItemWaveLength/2;
        //隨著重新整理，每次移動dx距離
        mPath.moveTo(-mItemWaveLength+dx,originY);
        //for迴圈當前螢幕中所有的波紋
        for (int i = -mItemWaveLength;i<=getWidth()+mItemWaveLength;i+=mItemWaveLength){
            mPath.rQuadTo(halfWaveLen/2,-100,halfWaveLen,0);
            mPath.rQuadTo(halfWaveLen/2,100,halfWaveLen,0);
        }
        mPath.lineTo(getWidth(),getHeight());
        mPath.lineTo(0,getHeight());
        mPath.close();

        canvas.drawPath(mPath,mPaint);
    }

    /**
     * 動畫的目的是讓波紋移動起來
     * 利用呼叫在path.moveTo的時候，將起始點向右移動即可實現移動，
     * 而且只要我們移動一個波長的長度，波紋就會重合，就可以實現無限迴圈了
     */
    public void startAnim(){
        //動畫移動的距離 0~mItemWaveLength
        ValueAnimator animator = ValueAnimator.ofInt(0,mItemWaveLength);
        //時間
        animator.setDuration(2000);
        //重複次數，這裡是無限次
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        //動畫重新整理監聽
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //每次移動的距離
                dx = (int)animation.getAnimatedValue();
                //重新整理View
                postInvalidate();
            }
        });
        animator.start();
    }
}

這樣就實現了一個水波紋的效果了。

相關推薦

Android自定義View之使用Path繪製手勢軌跡和水波效果

先看下效果圖： 繪製軌跡 繪製手指的軌跡主要是攔截View的onTouchEvent()方法，並根據手指的軌跡繪製path。path中有兩種可以實現的方法 1、Path.lineTo(x,y)方法 public class MoveP

Android 自定義View之View的繪製流程(一)

View繪製流程網上已經有很多詳細介紹的文章，這裡權當給自己最近在這方面的學習的一個記錄，另外本文主要是記錄自己在實際程式碼的一些寫法，一來記錄基礎知識方便自己後面複習二來在開發中可以參考這段時間的程式碼記錄多作參考，一般遇到問題都會在網上找答案，如果自己多記錄參考自己的文章

Android-自定義view之無所不能的path

自定義view之無所不能的path 最近專案中需要完成以下這個需求 UI給我了五張圖片，我感覺太浪費了，自定義view完全可以做而且適配起來更加的方便 最終實現效果 專案效果 擴充套件 需要知道技術點 在實現這個過程之前，

Android 自定義View之繪圖工具類Canvas+Paint+Path(onDraw方法)基礎詳解

本章節講述三個繪圖工具類Canvas(畫布)，Paint(畫筆)，Path(路徑) 1.Canvas(畫布)相關方法詳解 1.1. 方法：Canvas() 作用：建立一個空的畫布，可以使

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有

Android 自定義View之咖啡動畫

文章目錄效果畫杯子畫杯墊畫煙霧 效果 大概思路 自定義view，直接繼承view 複寫onSizeChanged()方法，在此計算杯墊，杯子，煙霧效果的path 在onDraw()方法中，描繪杯墊，杯子 處理煙霧動畫效果 畫杯子 這裡需要畫兩部分內容，第

Android 自定義View之下雨動畫

文章目錄效果思路畫雲畫雨滴優化 效果 開始前先做個熱身( ˘•灬•˘ ) 自己實現比較容易，但是到了要出部落格整理思路，總結要點的時候就撓頭，不知雲所以，所以最簡單的還是 如果對安卓UI有興趣的朋友可以加我好友互相探討， 思路 思路比較簡單，整個view無

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

android自定義view之畫圓隨著手指移動

public class MyView extends View { private Paint mFanPaint,mTextPaint;//扇形畫筆和文字畫筆 public float AxisX=100; public float AxisY=100; public MyView(

Android自定義view之實現帶checkbox的Snackbar

前言 最近專案要求實現一個類似於snackbar功能，但是又不完全是snackbar的外掛，本來想在Google提供的snackbar裡面進行更改，但是這樣太麻煩了，於是自己動手實現了一個snackbar。先看下效果圖： 1.要解決的問題 1.彈框裡面除了文字提示之外還有一個按鈕，這個按

android自定義View之3D索引效果

效果圖： 我的小霸王太卡了。 最近工作比較忙，今天搞了一下午才搞出來這個效果，這種效果有很多種實現方式，最常見的應該是用貝塞爾曲線實現的。今天我們來看另一種不同的實現方式，只需要用到 canvas.scale()，有沒有很好奇是怎麼實現的呢。 首先來說一下思路，只要有了思

android 自定義view之側滑效果

效果圖： 看網上的都是兩個view拼接，預設右側的不顯示，水平移動的時候把右側的view顯示出來。但是看最新版QQ上的效果不是這樣的，但給人的感覺卻很好，所以獻醜來一發比較高仿的。 知識點： 1、ViewDragHelper 的用法； 2、滑動衝突的解決； 3、自定