热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android中SurfaceView和view画出触摸轨迹

这篇文章主要介绍了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 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是自己起一个线程更新界面。

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


推荐阅读
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 三星W799在2011年的表现堪称经典,以其独特的双屏设计和强大的功能引领了双模手机的潮流。本文详细介绍其配置、功能及锁屏设置。 ... [详细]
  • 本文总结了汇编语言中第五至第八章的关键知识点,涵盖间接寻址、指令格式、安全编程空间、逻辑运算指令及数据重复定义等内容。通过详细解析这些内容,帮助读者更好地理解和应用汇编语言的高级特性。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 数据管理权威指南:《DAMA-DMBOK2 数据管理知识体系》
    本书提供了全面的数据管理职能、术语和最佳实践方法的标准行业解释,构建了数据管理的总体框架,为数据管理的发展奠定了坚实的理论基础。适合各类数据管理专业人士和相关领域的从业人员。 ... [详细]
  • 深入理解 SQL 视图、存储过程与事务
    本文详细介绍了SQL中的视图、存储过程和事务的概念及应用。视图为用户提供了一种灵活的数据查询方式,存储过程则封装了复杂的SQL逻辑,而事务确保了数据库操作的完整性和一致性。 ... [详细]
  • 优化版Windows 10 LTSC 21H2企业版:适用于低内存设备
    此版本为经过优化的Windows 10 LTSC 21H2企业版,特别适合低内存配置的计算机。它基于官方版本进行了精简和性能优化,确保在资源有限的情况下依然能够稳定运行。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 当iOS设备越狱后,某些插件可能会导致系统崩溃(白苹果)。此时,可以通过进入安全模式来排查并删除有问题的插件。本文将详细介绍如何通过特定按键组合进入不加载MobileSubstrate的安全模式,并提供相关背景知识。 ... [详细]
  • 使用C#开发SQL Server存储过程的指南
    本文介绍如何利用C#在SQL Server中创建存储过程,涵盖背景、步骤和应用场景,旨在帮助开发者更好地理解和应用这一技术。 ... [详细]
  • 新冠肺炎疫情期间,各大银行积极利用手机银行平台,满足客户在金融与生活多方面的需求。线上服务不仅激活了防疫相关的民生场景,还推动了银行通过互联网思维进行获客、引流与经营。本文探讨了银行在找房、买菜、打卡、教育等领域的创新举措。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
author-avatar
温柔842_259
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有