仿刮刮乐刮奖效果

该功能实现很简单,就是根据手指坐标位置在画板上画

1.效果图

          

2.代码实现

[java] view plaincopy

  1. public class ErinieShow extends RelativeLayout {  
  2.     Context context;  
  3.     RelativeLayout bg;  
  4.     MyView MyView;  
  5.     int level;  
  6.     public ErinieShow(Context context, int level) {  
  7.         super(context);  
  8.         this.context = context;  
  9.         this.level = level;  
  10.           
  11.         bg = new RelativeLayout(context);  
  12.         MyView = new MyView(context);  
  13.         bg.addView(MyView);  
  14.         addView(bg);  
  15.           
  16.         int[] resolution = PhoneUtil.getResolution(context);  
  17.         RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(  
  18.                 resolution[0], PhoneUtil.getFitHeight(context, 125));  
  19.   
  20.         bg.setId(100001);  
  21.         bg.setLayoutParams(params);  
  22.         MyView.setLayoutParams(params);  
  23.           
  24.         switch (level) {  
  25.         case 0:  
  26.             bg.setBackgroundResource(R.drawable.rewardlevel0);  
  27.             break;  
  28.         case 1:  
  29.             bg.setBackgroundResource(R.drawable.rewardlevel1);  
  30.   
  31.             break;  
  32.         case 2:  
  33.             bg.setBackgroundResource(R.drawable.rewardlevel2);  
  34.             break;  
  35.         default:  
  36.             bg.setBackgroundResource(R.drawable.rewardlevel3);  
  37.             break;  
  38.         }  
  39.           
  40.         MyView.init(Color.parseColor("#d3d3d3"), 30, 10);  
  41.     }  
  42. }  

[java] view plaincopy

  1. public class MyView extends TextView {  
  2.   
  3.     private float TOUCH_TOLERANCE; // 填充距离,使线条更自然,柔和,值越小,越柔和。  
  4.     private Bitmap mBitmap;  
  5.     private Canvas mCanvas;  
  6.     private Paint mPaint;  
  7.     private Path mPath;  
  8.     private float mX, mY;  
  9.     private boolean isDraw = false;  
  10.     int time=0;  
  11.       
  12.     public MyView(Context context) {  
  13.         super(context);  
  14.     }  
  15.   
  16.     @Override  
  17.     protected void onDraw(Canvas canvas) {  
  18.         super.onDraw(canvas);  
  19.         if (isDraw) {  
  20.             mCanvas.drawPath(mPath, mPaint);  
  21.             canvas.drawBitmap(mBitmap, 0, 0, null);  
  22.         }  
  23.     }  
  24.   
  25.     /** 
  26.      * 开启檫除功能 
  27.      *  
  28.      * @param bgColor 
  29.      *            覆盖的背景颜色 
  30.      * @param paintStrokeWidth 
  31.      *            触点(橡皮)宽度 
  32.      * @param touchTolerance 
  33.      *            填充距离,值越小,越柔和。 
  34.      */  
  35.     public void init(final int bgColor, final int paintStrokeWidth,  
  36.             float touchTolerance) {  
  37.         TOUCH_TOLERANCE = touchTolerance;  
  38.         // 设置画笔  
  39.         mPaint = new Paint();  
  40.         // mPaint.setAlpha(0);  
  41.         // 画笔划过的痕迹就变成透明色了  
  42.         mPaint.setColor(Color.BLACK); // 此处不能为透明色  
  43.         mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));  
  44.         // 或者  
  45.         // mPaint.setAlpha(0);  
  46.         // mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));  
  47.   
  48.         mPaint.setAntiAlias(true);  
  49.         mPaint.setDither(true);  
  50.         mPaint.setStyle(Paint.Style.STROKE);  
  51.         mPaint.setStrokeJoin(Paint.Join.ROUND); // 前圆角  
  52.         mPaint.setStrokeCap(Paint.Cap.ROUND); // 后圆角  
  53.         mPaint.setStrokeWidth(paintStrokeWidth); // 笔宽  
  54.   
  55.         // 痕迹  
  56.         mPath = new Path();  
  57.         // 覆盖  
  58.         LayoutParams layoutParams = getLayoutParams();  
  59.         int height = layoutParams.height;  
  60.         int width;  
  61.         if (getLayoutParams().width == LayoutParams.MATCH_PARENT) {  
  62.             width = 700;  
  63.         } else {  
  64.             width = layoutParams.width;  
  65.         }  
  66.   
  67.         mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);  
  68.         mCanvas = new Canvas(mBitmap);  
  69.   
  70.         mCanvas.drawColor(bgColor);  
  71.         isDraw = true;  
  72.     }  
  73.   
  74.     @Override  
  75.     public boolean onTouchEvent(MotionEvent event) {  
  76.         if (!isDraw) {  
  77.             return true;  
  78.         }  
  79.         switch (event.getAction()) {  
  80.         case MotionEvent.ACTION_DOWN: // 触点按下  
  81.             // touchDown(event.getRawX(),event.getRawY());  
  82.             touchDown(event.getX(), event.getY());  
  83.             invalidate();  
  84.             break;  
  85.         case MotionEvent.ACTION_MOVE: // 触点移动  
  86.             touchMove(event.getX(), event.getY());  
  87.             invalidate();  
  88.             break;  
  89.         case MotionEvent.ACTION_UP: // 触点弹起  
  90.             touchUp(event.getX(), event.getY());  
  91.             invalidate();  
  92.             break;  
  93.         default:  
  94.             break;  
  95.         }  
  96.         return true;  
  97.     }  
  98.   
  99.     private void touchDown(float x, float y) {  
  100.         mPath.reset();  
  101.         mPath.moveTo(x, y);  
  102.         mX = x;  
  103.         mY = y;  
  104.     }  
  105.   
  106.     private void touchMove(float x, float y) {  
  107.         float dx = Math.abs(x - mX);  
  108.         float dy = Math.abs(y - mY);  
  109.         if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {  
  110.             mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);  
  111.             mX = x;  
  112.             mY = y;  
  113.         }  
  114.   
  115.     }  
  116.   
  117.     private void touchUp(float x, float y) {  
  118.         mPath.lineTo(x, y);  
  119.         mCanvas.drawPath(mPath, mPaint);  
  120.         mPath.reset();  
  121.     }  
  122.   
  123. }  

源码下载http://download.csdn.net/detail/strawberry2013/7682865

时间: 2024-11-01 09:05:10

仿刮刮乐刮奖效果的相关文章

分享Android仿刮奖效果控件_Android

本文实例为大家分享了Android刮刮卡效果控件,供大家参考,具体内容如下 刮刮卡类: package com.reyo.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Paint; import android.gr

HTML5实现刮奖效果

原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperation,这个属性有多个值,而实现刮奖效果要用到的值就是destination-out.意思就是:在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明.这样可能不好理解,后面实现的时候会解释.有了globalCompositeOperation这个属性,实现过程就很简单了. 我们需要有两个

刮奖效果

刮奖效果   效果   说明 刮奖效果使用了开源的 Scatch & See 控件.   源码 https://github.com/YouXianMing/Animations https://github.com/moqod/iOS-Scratch-n-See // // ScratchImageViewController.m // Animations // // Created by YouXianMing on 15/12/22. // Copyright 2015年 YouXian

使用MDScratchImageView实现刮奖效果

使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // // RootViewController.m // Scratch // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "MDScratchI

轻松实现功能强大的Android刮奖效果控件(ScratchView)_Android

前言 我身边有一部分开发的小伙伴,存在着这样一种习惯.某一天,突然看到某一款 App 上有个很漂亮的自定义控件(动画)效果,就会绞尽脑子想办法去自己实现一发.当然,我自己也是属于这类型的骚年,看到某种效果就会手痒难耐琢磨着实现套路.个人觉得这是一种需求驱动进步的方法,当你绞尽脑子去实现自己想要的效果时,你就会发现你对 Android 自定义控件(动画)的知识体系认识越深,久而久之,自己也能轻松的造出各种控件(动画)效果.要是哪天,产品童鞋拿着个原型(或者对着某款 App )跟你讲:"XXXX,你

基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果_jquery

最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 4.列表数据加载(加载全部) 5.带动画效果的点赞功能 6.回复列表的hover显示功能 HTML代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta h

摄影后期仿中国古典风的照片效果

  摄影后期仿中国古典风的照片效果,实用粗暴,对中国风照片设计感兴趣的童鞋们,可以借鉴学习 分类: PS图片处理 ps后期处理教程

js实现仿Windows风格选项卡和按钮效果

  本文实例讲述了js实现仿Windows风格选项卡和按钮效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

  本文实例讲述了jQuery实现仿腾讯微博滑出效果报告每日天气的方法.分享给大家供大家参考.具体分析如下: 这是仿腾讯微博滑出效果的每日天气代码,鼠标放上去,天气内容将从左向右滑出来,像开抽屉一样,本动画效果流畅,当然少不了jQuery的功劳,本代码使用了1.6.2版本的jQuery插件来实现这一功能. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3

jQuery实战之仿淘宝商城左侧导航效果_jquery

希望对大家有用. 下面是效果图: 效果实现基于jq的 .html()方法.大大简化了对DOM的操作. 下面是代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type"