当前位置： 移动技术网 > IT编程>移动开发>Android > Android项目刮刮奖详解（一）

Android项目刮刮奖详解（一）

2018年08月20日  | 移动技术网IT编程  | 我要评论

上海宝山邮编,不死邪魂,明日时代

前言

最近正在学鸿洋大大的刮刮奖，感觉学有所得，便是来写篇详解（尽管网上有很多了，不过毕竟是自己写的，自己以后方便复习），正文开始

目标

实现画板功能

思路

我们需要自定义view来实现画板功能，之后再将其稍微改造即可。
关于自定义view，如果没有了解的同学建议先去了解一下，百度自定义view就会有许多相关教程了，
我在这里也就简单的提一下，自定义view常用的三大类，paint（画笔），path（路径），
canvas(画布)，

  1. 继承view，实现构造方法

    四个构造方法，我们主要实现两个参数的构造方法即可

     private paint moutterpaint = new paint(); // 绘制线条的paint,即用户手指绘制path
 private path mpath = new path();//记录用户绘制的path
 private canvas mcanvas;//画布，可以画东西
 private bitmap mbitmap;//画布在此图片上画画
 private int mlastx;//x坐标
 private int mlasty;//y坐标
 private bitmap background;//这个是背景图，我们先不理
 public guaguaka(context context) {
     super(context);
 }

 public guaguaka(context context, @nullable attributeset attrs) {
     super(context, attrs);
     mpath = new path();

 }

 public guaguaka(context context, @nullable attributeset attrs, int defstyleattr) {
     super(context, attrs, defstyleattr);
 }

 public guaguaka(context context, @nullable attributeset attrs, int defstyleattr, int defstyleres) {
     super(context, attrs, defstyleattr, defstyleres);
 }

  2. 复写onmeasure方法

    我们首先获得view的宽高，然后以此的宽高创建一个画布，同时，对画笔进行一些设置

     @override
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
     super.onmeasure(widthmeasurespec, heightmeasurespec);
     log.d(tag, "onmeasure: 测量");
     int width = getmeasuredwidth();
     int height = getmeasuredheight();
     // 初始化bitmap
     mbitmap = bitmap.createbitmap(width, height, bitmap.config.argb_8888);//以获得的宽高创建一个32位的bitmap
     mcanvas = new canvas(mbitmap);//以bitmap创建了一个画布
     mcanvas.drawcolor(color.green);//设置画布的颜色为绿色
     //背景图,下一节解析此部分代码，先注释掉
     /*bitmapdrawable bitmap = (bitmapdrawable) getresources().getdrawable(r.drawable.rewrite6);
     background = bitmap.getbitmap();
     background = bitmap.createscaledbitmap(background,width,height,true);*/
     // 设置画笔
     moutterpaint.setcolor(color.blue);
     moutterpaint.setantialias(true);//使用抗锯齿功能，会消耗较大资源，绘制图形速度会变慢
     moutterpaint.setdither(true);//图像抖动处理,会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰
     moutterpaint.setstyle(paint.style.stroke);
     moutterpaint.setstrokejoin(paint.join.round);//圆角，平滑
     moutterpaint.setstrokecap(paint.cap.round); //圆角
     moutterpaint.setstrokewidth(20); // 设置画笔宽度
 }

  3. 复写ontouchevent方法

    我们在这里复写，处理一下用户的触摸事件当手指按到屏幕上的时候，path路径之中就使用moveto方法，移动到手指当前位置，
    invalidate刷新view，回调ondraw方法，（还没有画出来）。之后，手指移动，action处于是处于action_move的状态，path路径使用lineto方法（画直线），同时，将x，y坐标进行了更新，invalidate刷新view，回调ondraw方法，canvas通过drawpath使用画笔将path画了出来，之后如果用户没有抬起手指，则继续循环action_move中的步骤

     @override
 public boolean ontouchevent(motionevent event) {
     //当手指按到屏幕上的时候，path路径之中就使用moveto方法，移动到手指当前位置，invalidate刷新view,回调ondraw方法,（还没有画出来）,canvas就将画笔移动到那个坐标
     //之后，手指移动，action是处于action_move的状态，path路径使用lineto方法（画直线），
     // 同时，将x，y坐标进行了更新，invalidate刷新view,回调ondraw方法，canvas通过drawpath使用画笔将path画了条出来（画直线），之后如果用户没有抬起手指，则继续循环action_move中的步骤

     int action = event.getaction();
     int x = (int) event.getx();//获得x坐标
     int y = (int) event.gety();//获得y坐标
     switch (action){
         case motionevent.action_down:
             mlastx = x; 
             mlasty = y; 
             mpath.moveto(mlastx, mlasty);//之后回调ondraw方法canvas将path
             break;
         case motionevent.action_move:
             mpath.lineto(x, y);//之后回调ondraw方法时canvas画直线到（x，y）该点
             mlastx = x;//更新x坐标
             mlasty = y;//更新y坐标
             break;
         default:break;
     }
     invalidate();//刷新view，回调ondraw方法
     log.d(tag, "ontouchevent: invalidate");
     return true;
    }

  4. 复写ondraw方法

    之后我们复写ondraw方法，在这里canvas用画笔开始画画

     @override
 protected void ondraw(canvas canvas) {
     log.d(tag, "ondraw: 画");
     //canvas.drawbitmap(background,0,0,null);//下一节解析，这里先注释掉
     //moutterpaint.setxfermode(new porterduffxfermode(porterduff.mode.dst_out));//下一节解析，注释掉
     mcanvas.drawpath(mpath, moutterpaint);//mcanvas是我们定义的画布，用户的每次的手指轨迹都被path记录下来，之后mcanvas就使用画笔将用户的手指轨迹画了出来
     canvas.drawbitmap(mbitmap, 0,0, null);//将mbitmap画出来
 }

ps：这里测试的时候发现mcanvas与canvas的顺序可以换个位置，影响不大
测试动态图

简单的流程图

流程图

补充 双缓冲技术

事实上，刮刮卡这个项目用到了双缓冲技术

双缓冲即在内存中创建一个与屏幕绘图区域一致的对象，先将图形绘制到内存中的这个对象上，再一次性将这个对象上的图形拷贝到屏幕上，这样能大大加快绘图的速度。

我们定义了一个mbitmap，之后使用这个mbitmap建立了一个画布，实际上我们的mcanvas只在mbitmap上画画

    mbitmap = bitmap.createbitmap(width, height, bitmap.config.argb_8888);//以获得的宽高创建一个32位的bitmap
    mcanvas = new canvas(mbitmap);//以bitmap创建了一个画布
    mcanvas.drawcolor(color.green);

mcanvas负责将用户的手指痕迹通过drawpath方法画出来

    mcanvas.drawpath(mpath, moutterpaint);

之后，ondraw方法里面的canvas则将mbitmap复制并显示出来

    canvas.drawbitmap(mbitmap, 0,0, null);//将mbitmap画出来（将mbitmap直接复制到view上显示）

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网