Android中SurfaceView和view画出触摸轨迹

2020-01-02 07:02:52

字体：大中小

来源：转载

供稿：网友

一、引言
         想实现一个空白的画板，上面可以画出手滑动的轨迹，就这么一个小需求。一般就来讲就两种实现方式，view或者surfaceview。下面看看两种是如何实现的。
二、实现原理
         先简单说一下实现原理：
       （1）用一张白色的Bitmap作为画板
       （2）用canvas在bitmap上画线
       （3）为了画出平滑的曲线，要用canvas的drawPath（Path，Paint）方法。
       （4）同时使用贝塞尔曲线来使曲线更加平滑
三、View实现
直接贴代码了：

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;//默认画笔颜色    private float strokeWidth =20f;//默认画笔宽度    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){    //手指点下屏幕时触发        startX=clickX;    startY=clickY;    mPath.reset();    mPath.moveTo(clickX, clickY);     //   isMove =false; //   invalidate(); //   return true;   }   else if(event.getAction()==MotionEvent.ACTION_MOVE){    //手指移动时触发    float dx=Math.abs(clickX-startX);    float dy=Math.abs(clickY-startY); //   if(dx>=3||dy>=3){     //设置贝塞尔曲线的操作点为起点和终点的一半     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 设定文件  * @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);//设置为画线      paint.setAntiAlias(true);//设置画笔抗锯齿      paint.setColor(color);//设置画笔颜色      paint.setStrokeWidth(strokeWidth);//设置画笔宽度  }      /**  * @Title: setColor  * @Description: TODO(设置画笔颜色)  * @param @param color 设定文件  * @return void 返回类型  * @throws  */  public void setColor(int color){      this.color=color;   initPaint();  }    public Bitmap getPaint(){   return new1Bitmap;  } }

看一下效果：

基本满足需求
三、surfaceView实现

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{      /** 控制游戏更新循环 **/  boolean mRunning = false;    /**控制游戏循环**/  boolean mIsRunning = false;    /**每50帧刷新一次屏幕**/   public static final int TIME_IN_FRAME = 50;   private int paintColor=android.graphics.Color.WHITE;//默认画笔颜色为黑色    private float paintWidth=2f;//默认画笔宽度    private Style paintStyle=Style.STROKE;//默认画笔风格    private int paintAlph=255;//默认不透明    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);//设置当前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  设定文件  * @return void 返回类型  * @throws  */  private void initPaint(){   mPaint=new Paint();   mPaint.setAntiAlias(true);//消除锯齿   mPaint.setColor(paintColor);//画笔颜色   mPaint.setAlpha(paintAlph);//画笔透明度   mPaint.setStyle(paintStyle);//设置画笔风格   mPaint.setStrokeWidth(paintWidth);//设置画笔宽度  }    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:    //手接触屏幕时触发    doTouchDown(event);    break;   case MotionEvent.ACTION_MOVE:    //手滑动时触发    doTouchMove(event);    break;       case MotionEvent.ACTION_UP:    //手抬起时触发        break;        default:    break;   }   return true;  }    /**  * @Title: doTouchDown  * @Description: TODO(手触摸到屏幕时需要做的事情)  * @param @param event 设定文件  * @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 设定文件  * @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();    }        /** 取得更新游戏结束的时间 **/    long endTime = System.currentTimeMillis();      /** 计算出游戏一次更新的毫秒数 **/    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;  }     }

看看运行效果：

当我不设置背景时是没问题的，但使用了背景就不停的闪烁了，不知道有没同学知道的，可以说一下。

大家可以阅读本文《解决Android SurfaceView绘制触摸轨迹闪烁问题的方法》，或许对大家的学习有所帮助。

五、总结
两种方式都是可以实现的，而且仔细对比发现surfaceview响应的速度比view快很多，view想必与surfaceview更容易实现。
view用于显示被动更新的动画，即需要操作才会更新的动画，而surfaceview则用于主动更新的动画，如在界面上显示一个奔跑的小狗。
view更新界面是在UI主线程。surfaceview是自己起一个线程更新界面。

以上就是本文的全部内容，希望大家喜欢。

上一篇：解决Android SurfaceView绘制触摸轨迹闪烁问题的方法

下一篇：Android实现断点下载的方法