Android中SurfaceView和view畫出觸摸軌跡
更新時間：2022年05月18日 10:39:47 投稿：lijiao
這篇文章主要介紹了Android中SurfaceView和view畫出觸摸軌跡的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、引言
想實現(xiàn)一個空白的畫板，上面可以畫出手滑動的軌跡，就這么一個小需求。一般就來講就兩種實現(xiàn)方式，view或者surfaceview。下面看看兩種是如何實現(xiàn)的。
二、實現(xiàn)原理
先簡單說一下實現(xiàn)原理：
（1）用一張白色的Bitmap作為畫板
（2）用canvas在bitmap上畫線
（3）為了畫出平滑的曲線，要用canvas的drawPath（Path，Paint）方法。
（4）同時使用貝塞爾曲線來使曲線更加平滑
三、View實現(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(這里用一句話描述這個類的作用)
* @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){
//手指點下屏幕時觸發(fā)
startX=clickX;
startY=clickY;
mPath.reset();
mPath.moveTo(clickX, clickY);
// isMove =false;
// invalidate();
// return true;
}
else if(event.getAction()==MotionEvent.ACTION_MOVE){
//手指移動時觸發(fā)
float dx=Math.abs(clickX-startX);
float dy=Math.abs(clickY-startY);
// if(dx>=3||dy>=3){
//設(shè)置貝塞爾曲線的操作點為起點和終點的一半
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(這里用一句話描述這個方法的作用)
* @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實現(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:
//手接觸屏幕時觸發(fā)
doTouchDown(event);
break;
case MotionEvent.ACTION_MOVE:
//手滑動時觸發(fā)
doTouchMove(event);
break;
case MotionEvent.ACTION_UP:
//手抬起時觸發(fā)
break;
default:
break;
}
return true;
}
/**
* @Title: doTouchDown
* @Description: TODO(手觸摸到屏幕時需要做的事情)
* @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(手在屏幕上滑動時要做的事情)
* @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);//移動的距離
float dy =Math.abs(touchY-startX);//移動的距離
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) {
/** 取得更新游戲之前的時間 **/
long startTime = System.currentTimeMillis();
/** 在這里加上線程安全鎖 **/
synchronized(surfaceHolder){
doDraw();
}
/** 取得更新游戲結(jié)束的時間 **/
long endTime = System.currentTimeMillis();
/** 計算出游戲一次更新的毫秒數(shù) **/
int diffTime = (int) (endTime - startTime);
/** 確保每次更新時間為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;
}
}
看看運行效果：
當(dāng)我不設(shè)置背景時是沒問題的，但使用了背景就不停的閃爍了，不知道有沒同學(xué)知道的，可以說一下。
大家可以閱讀本文《解決Android SurfaceView繪制觸摸軌跡閃爍問題的方法》，或許對大家的學(xué)習(xí)有所幫助。
五、總結(jié)
兩種方式都是可以實現(xiàn)的，而且仔細(xì)對比發(fā)現(xiàn)surfaceview響應(yīng)的速度比view快很多，view想必與surfaceview更容易實現(xiàn)。
view用于顯示被動更新的動畫，即需要操作才會更新的動畫，而surfaceview則用于主動更新的動畫，如在界面上顯示一個奔跑的小狗。
view更新界面是在UI主線程。surfaceview是自己起一個線程更新界面。
以上就是本文的全部內(nèi)容，希望大家喜歡。
相關(guān)文章
Android中點擊按鈕啟動另一個Activity及Activity之間傳值問題
這篇文章主要介紹了Android中點擊按鈕啟動另一個Activity及Activity之間傳值問題，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
Android實現(xiàn)支持所有View的通用的下拉刷新控件
這篇文章主要介紹了Android實現(xiàn)支持所有View的通用的下拉刷新控件的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了Android捕獲點擊事件范圍的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細(xì)介紹了Android接收和發(fā)送短信的實現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)淘寶商品列表切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
大家在日常中經(jīng)常見到用xml文件實現(xiàn)android常用布局，但是大家知道如何用代碼實現(xiàn)呢？使用代碼實現(xiàn)可以幫助我們學(xué)習(xí)sdk api，所以小編把我日常整理些關(guān)于android常用布局代碼實現(xiàn)分享給大家2015-11-11
詳解Android Handler機制和Looper Handler Message關(guān)系
Handler是Android線程之間的消息機制，主要的作用是將一個任務(wù)切換到指定的線程中去執(zhí)行，準(zhǔn)確的說是切換到構(gòu)成Handler的looper所在的線程中去出處理。本文將詳細(xì)介紹Android Handler機制和Looper Handler Message關(guān)系。2021-06-06
Android實現(xiàn)屏幕旋轉(zhuǎn)方法總結(jié)
這篇文章主要介紹了Android實現(xiàn)屏幕旋轉(zhuǎn)方法,實例總結(jié)了屏幕旋轉(zhuǎn)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
Android添加用戶組及自定義App權(quán)限的方法
今天小編就為大家分享一篇Android添加用戶組及自定義App權(quán)限的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-07-07
Android判斷用戶2G/3G/4G移動數(shù)據(jù)網(wǎng)絡(luò)
這篇文章主要介紹了Android判斷用戶2G/3G/4G移動數(shù)據(jù)網(wǎng)絡(luò)的方法，感興趣的小伙伴們可以參考一下2015-12-12