Android自定義視圖實(shí)現(xiàn)手指移動(dòng)軌跡
今天看了大神寫的關(guān)于貝塞爾曲線的博客,就寫下了關(guān)于手指軌跡的一篇博客,
一、什么是貝塞爾曲線
貝塞爾曲線(Bézier curve),又稱貝茲曲線或貝濟(jì)埃曲線,是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。一般的矢量圖形軟件通過它來(lái)精確畫出曲線,貝茲曲線由線段與節(jié)點(diǎn)組成,節(jié)點(diǎn)是可拖動(dòng)的支點(diǎn),線段像可伸縮的皮筋,我們?cè)诶L圖工具上看到的鋼筆工具就是來(lái)做這種矢量曲線的。貝塞爾曲線是計(jì)算機(jī)圖形學(xué)中相當(dāng)重要的參數(shù)曲線,在一些比較成熟的位圖軟件中也有貝塞爾曲線工具,如PhotoShop等。
二、貝塞爾曲線公式
三、手指軌跡原理
因?yàn)檫@個(gè)我們用的是自定義控件,所以我們創(chuàng)建一個(gè)finger的類集成View,重寫onDraw onTouchEvent這個(gè)兩個(gè)方法
public finger(Context context, @Nullable AttributeSet attrs)需要這個(gè)構(gòu)造方法
其實(shí)手指軌跡的原理也很簡(jiǎn)單,就是通過onTouchEvent來(lái)獲取道手指的位置,來(lái)繪制path路徑即可。
四、分析代碼
這里我先寫出全部的代碼,后面我再來(lái)一一分析代碼的作用:
全部代碼:
package com.campus.shopping.drawtext; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; /** * Created by sang on 2018/6/24. */ public class MyView extends View { private Path mPath = new Path(); private float mPreX,mPreY; public MyView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } @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(); return true; } case MotionEvent.ACTION_MOVE: float endX = (mPreX+event.getX())/2; float endY = (mPreY+event.getY())/2; mPath.quadTo(mPreX,mPreY,endX,endY); mPreX = event.getX(); mPreY = event.getY(); invalidate(); break; default: break; } return super.onTouchEvent(event); } public void reset(){ mPath.reset(); invalidate(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint paint = new Paint(); paint.setColor(Color.WHITE); paint.setStyle(Paint.Style.STROKE); canvas.drawPath(mPath, paint); } }
onTouchEvent方法:
public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { mPath.moveTo(event.getX(), event.getY()); mPreX = event.getX(); mPreY = event.getY(); return true; } case MotionEvent.ACTION_MOVE: float endX = (mPreX+event.getX())/2; float endY = (mPreY+event.getY())/2; mPath.quadTo(mPreX,mPreY,endX,endY); mPreX = event.getX(); mPreY = event.getY(); invalidate(); break; default: break; } return super.onTouchEvent(event); }
當(dāng)手指按下觸發(fā)了ACTION_DOWN時(shí),這里我通過moveTo的方法繪制了第一個(gè)點(diǎn),這個(gè)必須使用moveTo,因?yàn)槿绻皇褂眠@個(gè)這個(gè)點(diǎn)將會(huì)在(0,0)開始,最后我們回去到xy點(diǎn)作為控制點(diǎn),最后使用返回 真的方式讓ACTION_MOVE,ACTION_UP事件往這個(gè)控件繼續(xù)傳遞事件。
再來(lái)看當(dāng)觸發(fā)ACTION_MOVE時(shí),因?yàn)樨惾麪柷€是由線段構(gòu)成的,結(jié)束點(diǎn)時(shí)在線段的中間的位置,所以這里的計(jì)算方法是(起點(diǎn)+最后的點(diǎn))/2就可以得到中間的點(diǎn).
使用方式:
<com.campus.shopping.drawtext.finger android:id="@+id/viewmy" android:layout_width="fill_parent" android:layout_height="fill_parent" />
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android編程實(shí)現(xiàn)將應(yīng)用強(qiáng)制安裝到手機(jī)內(nèi)存的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)將應(yīng)用強(qiáng)制安裝到手機(jī)內(nèi)存的方法,分析了Android程序安裝的相關(guān)屬性設(shè)置技巧及注意事項(xiàng),需要的朋友可以參考下2015-12-12Android?中TextureView和SurfaceView的屬性方法及示例說(shuō)明
這篇文章主要介紹了Android?中TextureView和SurfaceView的屬性方法及示例說(shuō)明,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-06-06Android BSearchEdit 搜索結(jié)果選擇框的實(shí)例代碼
EditText搜索結(jié)果下拉框、自動(dòng)or回調(diào)模式、可diy、使用超簡(jiǎn)便。這篇文章主要介紹了Android BSearchEdit 搜索結(jié)果選擇框的實(shí)例代碼,需要的朋友可以參考下2019-10-10android BottomSheetDialog新控件解析實(shí)現(xiàn)知乎評(píng)論列表效果(實(shí)例代碼)
BottomSheetDialog是一個(gè)自定義的從底部滑入的對(duì)話框,這篇文章主要介紹了android BottomSheetDialog新控件解析實(shí)現(xiàn)知乎評(píng)論列表效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04Android實(shí)現(xiàn)截屏方式整理(總結(jié))
本篇文章主要介紹了Android 截屏方式整理(總結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07viewPager+fragment刷新緩存fragment的方法
這篇文章主要介紹了viewPager+fragment刷新緩存fragment的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03Android實(shí)現(xiàn) Shape屬性gradient 漸變效果
這篇文章主要介紹了Android 實(shí)現(xiàn)Shape屬性gradient 漸變效果,gradient用以定義漸變色,可以定義兩色漸變和三色漸變,及漸變樣式,具體實(shí)現(xiàn)代碼感興趣的朋友跟隨小編一起看看吧2019-11-11