Android中SurfaceView和view畫出觸摸軌跡
一、引言
想實(shí)現(xiàn)一個(gè)空白的畫板,上面可以畫出手滑動(dòng)的軌跡,就這么一個(gè)小需求。一般就來講就兩種實(shí)現(xiàn)方式,view或者surfaceview。下面看看兩種是如何實(shí)現(xiàn)的。
二、實(shí)現(xiàn)原理
先簡(jiǎn)單說一下實(shí)現(xiàn)原理:
(1)用一張白色的Bitmap作為畫板
(2)用canvas在bitmap上畫線
(3)為了畫出平滑的曲線,要用canvas的drawPath(Path,Paint)方法。
(4)同時(shí)使用貝塞爾曲線來使曲線更加平滑
三、View實(shí)現(xiàn)
直接貼代碼了:
package picturegame.view; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Path; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import com.winton.picturegame.R; /** * @ClassName: GameView * @Description: TODO(這里用一句話描述這個(gè)類的作用) * @author Winton winton_by@126.com * @date 2015年9月26日 上午8:54:37 * */ public class GameView extends View{ private Paint paint = null; // private Bitmap originalBitmap = null;//原始圖 private Bitmap new1Bitmap = null; private Bitmap new2Bitmap = null; private float clickX =0; private float clickY=0; private float startX=0; private float startY=0; private boolean isMove = true; private boolean isClear = false; private int color =Color.RED;//默認(rèn)畫筆顏色 private float strokeWidth =20f;//默認(rèn)畫筆寬度 Path mPath; public GameView(Context context) { this(context,null); // TODO Auto-generated constructor stub } public GameView(Context context,AttributeSet atts) { this(context,atts,0); // TODO Auto-generated constructor stub } @SuppressWarnings("static-access") public GameView(Context context,AttributeSet atts,int defStyle) { super(context,atts,defStyle); // TODO Auto-generated constructor stub originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.default_pic).copy(Bitmap.Config.ARGB_8888, true);//白色的畫板 new1Bitmap=originalBitmap.createBitmap(originalBitmap); mPath=new Path(); } //清楚 @SuppressWarnings("static-access") public void clear(){ isClear =true; new2Bitmap=originalBitmap.createBitmap(originalBitmap); invalidate();//重置 } public void setStrokeWidth(float width){ this.strokeWidth=width; initPaint(); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); canvas.drawBitmap(writer(new1Bitmap),0,0, null); } @SuppressLint("ClickableViewAccessibility") @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub clickX =event.getX(); clickY=event.getY(); if(event.getAction()==MotionEvent.ACTION_DOWN){ //手指點(diǎn)下屏幕時(shí)觸發(fā) startX=clickX; startY=clickY; mPath.reset(); mPath.moveTo(clickX, clickY); // isMove =false; // invalidate(); // return true; } else if(event.getAction()==MotionEvent.ACTION_MOVE){ //手指移動(dòng)時(shí)觸發(fā) float dx=Math.abs(clickX-startX); float dy=Math.abs(clickY-startY); // if(dx>=3||dy>=3){ //設(shè)置貝塞爾曲線的操作點(diǎn)為起點(diǎn)和終點(diǎn)的一半 float cX = (clickX + startX) / 2; float cY = (clickY + startY) / 2; mPath.quadTo(startX,startY, cX, cY); startX=clickX; startY=clickY; // } // isMove =true; // invalidate(); // return true; } invalidate(); return true; } /** * @Title: writer * @Description: TODO(這里用一句話描述這個(gè)方法的作用) * @param @param pic * @param @return 設(shè)定文件 * @return Bitmap 返回類型 * @throws */ public Bitmap writer(Bitmap pic){ initPaint(); Canvas canvas =null; if(isClear){ canvas=new Canvas(new2Bitmap); }else{ canvas=new Canvas(pic); } //canvas.drawLine(startX, startY, clickX, clickY, paint);//畫線 canvas.drawPath(mPath, paint); if(isClear){ return new2Bitmap; } return pic; } private void initPaint(){ paint = new Paint();//初始化畫筆 paint.setStyle(Style.STROKE);//設(shè)置為畫線 paint.setAntiAlias(true);//設(shè)置畫筆抗鋸齒 paint.setColor(color);//設(shè)置畫筆顏色 paint.setStrokeWidth(strokeWidth);//設(shè)置畫筆寬度 } /** * @Title: setColor * @Description: TODO(設(shè)置畫筆顏色) * @param @param color 設(shè)定文件 * @return void 返回類型 * @throws */ public void setColor(int color){ this.color=color; initPaint(); } public Bitmap getPaint(){ return new1Bitmap; } }
看一下效果:
基本滿足需求
三、surfaceView實(shí)現(xiàn)
package picturegame.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Path; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.SurfaceHolder; import android.view.SurfaceHolder.Callback; import android.view.SurfaceView; import com.winton.picturegame.R; public class GameViewSurface extends SurfaceView implements Callback,Runnable{ /** 控制游戲更新循環(huán) **/ boolean mRunning = false; /**控制游戲循環(huán)**/ boolean mIsRunning = false; /**每50幀刷新一次屏幕**/ public static final int TIME_IN_FRAME = 50; private int paintColor=android.graphics.Color.WHITE;//默認(rèn)畫筆顏色為黑色 private float paintWidth=2f;//默認(rèn)畫筆寬度 private Style paintStyle=Style.STROKE;//默認(rèn)畫筆風(fēng)格 private int paintAlph=255;//默認(rèn)不透明 private Path mPath;//軌跡 private Paint mPaint;//畫筆 private float startX=0.0f;//初始x private float startY=0.0f;//初始Y private SurfaceHolder surfaceHolder; public Canvas mCanvas; public boolean first=true; Bitmap bg; public GameViewSurface(Context context){ this(context,null); } public GameViewSurface(Context context,AttributeSet attrs){ this(context,attrs,0); } public GameViewSurface(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub this.setFocusable(true);//設(shè)置當(dāng)前view擁有觸摸事件 surfaceHolder=getHolder(); surfaceHolder.addCallback(this); mPath=new Path(); initPaint(); bg = BitmapFactory.decodeResource(getResources(), R.drawable.default_pic).copy(Bitmap.Config.ARGB_8888, true);//白色的畫板 } /** * @Title: initPaint * @Description: TODO(初始化畫筆) * @param 設(shè)定文件 * @return void 返回類型 * @throws */ private void initPaint(){ mPaint=new Paint(); mPaint.setAntiAlias(true);//消除鋸齒 mPaint.setColor(paintColor);//畫筆顏色 mPaint.setAlpha(paintAlph);//畫筆透明度 mPaint.setStyle(paintStyle);//設(shè)置畫筆風(fēng)格 mPaint.setStrokeWidth(paintWidth);//設(shè)置畫筆寬度 } public void doDraw(){ mCanvas=surfaceHolder.lockCanvas(); mCanvas.drawPath(mPath, mPaint);//繪制 surfaceHolder.unlockCanvasAndPost(mCanvas); } @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //手接觸屏幕時(shí)觸發(fā) doTouchDown(event); break; case MotionEvent.ACTION_MOVE: //手滑動(dòng)時(shí)觸發(fā) doTouchMove(event); break; case MotionEvent.ACTION_UP: //手抬起時(shí)觸發(fā) break; default: break; } return true; } /** * @Title: doTouchDown * @Description: TODO(手觸摸到屏幕時(shí)需要做的事情) * @param @param event 設(shè)定文件 * @return void 返回類型 * @throws */ private void doTouchDown(MotionEvent event){ float touchX=event.getX(); float touchY=event.getY(); startX=touchX; startY=touchY; mPath.reset(); mPath.moveTo(touchX, touchY); } /** * @Title: doTouchMove * @Description: TODO(手在屏幕上滑動(dòng)時(shí)要做的事情) * @param @param event 設(shè)定文件 * @return void 返回類型 * @throws */ private void doTouchMove(MotionEvent event){ float touchX=event.getX(); float touchY=event.getY(); float dx=Math.abs(touchX-startX);//移動(dòng)的距離 float dy =Math.abs(touchY-startX);//移動(dòng)的距離 if(dx>3||dy>3){ float cX=(touchX+startX)/2; float cY=(touchY+startY)/2; mPath.quadTo(startX, startY, cX, cY); startX=touchX; startY=touchY; } } public void setPaintColor(int paintColor) { this.paintColor = paintColor; initPaint(); } public void setPaintWidth(float paintWidth) { this.paintWidth = paintWidth; initPaint(); } public void setPaintStyle(Style paintStyle) { this.paintStyle = paintStyle; initPaint(); } public void setPaintAlph(int paintAlph) { this.paintAlph = paintAlph; initPaint(); } @Override public void run() { // TODO Auto-generated method stub while (mIsRunning) { /** 取得更新游戲之前的時(shí)間 **/ long startTime = System.currentTimeMillis(); /** 在這里加上線程安全鎖 **/ synchronized(surfaceHolder){ doDraw(); } /** 取得更新游戲結(jié)束的時(shí)間 **/ long endTime = System.currentTimeMillis(); /** 計(jì)算出游戲一次更新的毫秒數(shù) **/ int diffTime = (int) (endTime - startTime); /** 確保每次更新時(shí)間為50幀 **/ while (diffTime <= TIME_IN_FRAME) { diffTime = (int) (System.currentTimeMillis() - startTime); /** 線程等待 **/ Thread.yield(); } } } @Override public void surfaceCreated(SurfaceHolder holder) { // TODO Auto-generated method stub mCanvas =surfaceHolder.lockCanvas(); mCanvas.drawBitmap(bg, 0,0, null); surfaceHolder.unlockCanvasAndPost(mCanvas); mIsRunning=true; new Thread(this).start(); } @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { // TODO Auto-generated method stub } @Override public void surfaceDestroyed(SurfaceHolder holder) { // TODO Auto-generated method stub mIsRunning = false; } }
看看運(yùn)行效果:
當(dāng)我不設(shè)置背景時(shí)是沒問題的,但使用了背景就不停的閃爍了,不知道有沒同學(xué)知道的,可以說一下。
大家可以閱讀本文《解決Android SurfaceView繪制觸摸軌跡閃爍問題的方法》,或許對(duì)大家的學(xué)習(xí)有所幫助。
五、總結(jié)
兩種方式都是可以實(shí)現(xiàn)的,而且仔細(xì)對(duì)比發(fā)現(xiàn)surfaceview響應(yīng)的速度比view快很多,view想必與surfaceview更容易實(shí)現(xiàn)。
view用于顯示被動(dòng)更新的動(dòng)畫,即需要操作才會(huì)更新的動(dòng)畫,而surfaceview則用于主動(dòng)更新的動(dòng)畫,如在界面上顯示一個(gè)奔跑的小狗。
view更新界面是在UI主線程。surfaceview是自己起一個(gè)線程更新界面。
以上就是本文的全部?jī)?nèi)容,希望大家喜歡。
相關(guān)文章
Android中點(diǎn)擊按鈕啟動(dòng)另一個(gè)Activity及Activity之間傳值問題
這篇文章主要介紹了Android中點(diǎn)擊按鈕啟動(dòng)另一個(gè)Activity及Activity之間傳值問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Android實(shí)現(xiàn)支持所有View的通用的下拉刷新控件
這篇文章主要介紹了Android實(shí)現(xiàn)支持所有View的通用的下拉刷新控件的相關(guān)資料,需要的朋友可以參考下2016-06-06Android接收和發(fā)送短信的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Android接收和發(fā)送短信的實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下2016-08-08Android實(shí)現(xiàn)淘寶商品列表切換效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)淘寶商品列表切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01詳解Android Handler機(jī)制和Looper Handler Message關(guān)系
Handler是Android線程之間的消息機(jī)制,主要的作用是將一個(gè)任務(wù)切換到指定的線程中去執(zhí)行,準(zhǔn)確的說是切換到構(gòu)成Handler的looper所在的線程中去出處理。本文將詳細(xì)介紹Android Handler機(jī)制和Looper Handler Message關(guān)系。2021-06-06Android實(shí)現(xiàn)屏幕旋轉(zhuǎn)方法總結(jié)
這篇文章主要介紹了Android實(shí)現(xiàn)屏幕旋轉(zhuǎn)方法,實(shí)例總結(jié)了屏幕旋轉(zhuǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04Android添加用戶組及自定義App權(quán)限的方法
今天小編就為大家分享一篇Android添加用戶組及自定義App權(quán)限的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-07-07Android判斷用戶2G/3G/4G移動(dòng)數(shù)據(jù)網(wǎng)絡(luò)
這篇文章主要介紹了Android判斷用戶2G/3G/4G移動(dòng)數(shù)據(jù)網(wǎng)絡(luò)的方法,感興趣的小伙伴們可以參考一下2015-12-12