Android中SurfaceView和view画出触摸轨迹

一、引言
         想实现一个空白的画板，上面可以画出手滑动的轨迹，就这么一个小需求。一般就来讲就两种实现方式，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 [e-mail]
* @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是自己起一个线程更新界面。

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