分享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.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.TextView;

/**
 * 刮刮卡类
 * @author reyo
 *
 */
public class ScratchTextView extends TextView{

 private float TOUCH_TOLERANCE;
 private Bitmap mBitmap;
 private Canvas mCanvas;
 private Paint mPaint;
 private Path mPath;
 private float mX,mY;

 private boolean isDraw = false;

 public ScratchTextView(Context context) {
 super(context);

 }
 public ScratchTextView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 }

 public ScratchTextView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if (isDraw) {
  mCanvas.drawPath(mPath, mPaint);
//  mCanvas.drawPoint(mX, mY, mPaint);
  canvas.drawBitmap(mBitmap, 0, 0, null);
 }
 }

 /**
 * 初始化刮刮卡
 * @param bgColor 刮刮卡背景色
 * @param paintStrokeWidth 擦除线宽
 * @param touchTolerance 画线容差
 */
 public void initScratchCard(final int bgColor,final int paintStrokeWidth,float touchTolerance) {
 TOUCH_TOLERANCE = touchTolerance;
 mPaint = new Paint();
// mPaint.setAlpha(0);
// mPaint.setColor(Color.BLACK);
// mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

 mPaint.setAlpha(0);
 mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

 mPaint.setAntiAlias(true);
 mPaint.setDither(true);
 mPaint.setStyle(Paint.Style.STROKE);
 mPaint.setStrokeJoin(Paint.Join.ROUND);
 mPaint.setStrokeCap(Paint.Cap.ROUND);
 mPaint.setStrokeWidth(paintStrokeWidth);

 mPath = new Path();

 mBitmap = Bitmap.createBitmap(getLayoutParams().width, getLayoutParams().height, Config.ARGB_8888);
 mCanvas = new Canvas(mBitmap);

 mCanvas.drawColor(bgColor);
 isDraw = true;
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
 if (!isDraw) {
  return true;
 }
 switch (event.getAction()) {
 case MotionEvent.ACTION_DOWN:
  touchDown(event.getX(), event.getY());
  invalidate();
  break;
 case MotionEvent.ACTION_MOVE:
  touchMove(event.getX(), event.getY());
  invalidate();
  break;
 case MotionEvent.ACTION_UP:
  touchUp(event.getX(), event.getY());
  invalidate();
  break;
 default:
  break;
 }
 return true;
 }

 private void touchDown(float x,float y){
 mPath.reset();
 mPath.moveTo(x, y);
 mX = x;
 mY = y;
 }

 private void touchMove(float x,float y){
 float dx = Math.abs(x - mX);
 float dy = Math.abs(y - mY);
 if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
  mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
  mX = x;
  mY = y;
 }

 }

 private void touchUp(float x,float y){
 mPath.lineTo(x, y);
 mCanvas.drawPath(mPath, mPaint);
 mPath.reset();
 }

}

使用:

package com.reyo.app;

import com.reyo.view.ScratchTextView;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;

public class RubberActivity extends Activity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 // setContentView(new RubberView(this,"title",new Rect(100, 200,300,250),5,1f,18));
 setContentView(R.layout.main);
 ((ScratchTextView) findViewById(R.id.rubbler)).initScratchCard(0xFFFFFFFF, 5, 1f);

 }

 class RubberView extends View {

 private final int PAINT_STROKE_WIDTH;
 private final float TOUCH_TOLERANCE;
 private final int TEXT_SIZE;

 private Bitmap mBitmap;
 private Canvas mCanvas;
 private Paint mPaint;
 private Path mPath;
 private float mX, mY;
 private final int X, Y, W, H;

 private final Rect touchRect;

 public RubberView(Context context, String bgText, Rect rect,
  int paintStrokeWidth, float touchTolerance, int textSize) {
  super(context);
  setFocusable(true);
  touchRect = rect;
  W = rect.right - rect.left;
  H = rect.bottom - rect.top;
  X = rect.left;
  Y = rect.top;
  TEXT_SIZE = textSize;
  PAINT_STROKE_WIDTH = paintStrokeWidth;
  TOUCH_TOLERANCE = touchTolerance;
  setBackground(touchRect, bgText);
  initDrowTools();
 }

 private void setBackground(Rect rect, String bgText) {
  DisplayMetrics dm = new DisplayMetrics();
  dm = this.getResources().getDisplayMetrics();

  Bitmap bitmap = Bitmap.createBitmap(dm.widthPixels,
   dm.heightPixels, Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);

  Paint paint = new Paint();
  paint.setColor(0x88000000);
  // paint.setStyle(Style.STROKE);
  // paint.setTextAlign(Align.CENTER);
  paint.setTextSize(TEXT_SIZE);

  // paint.setTextScaleX(1.5f);
  canvas.drawColor(Color.WHITE);
  int x = rect.left + (rect.right - rect.left - bgText.length() * TEXT_SIZE) / 2;
  int y = rect.top + (rect.bottom - rect.top - TEXT_SIZE) / 2;
  // int y = 218+25;
  canvas.drawText(bgText, x, y, paint);
  Drawable drawable = new BitmapDrawable(bitmap);
  setBackgroundDrawable(drawable);
 }

 private void initDrowTools() {
  mPaint = new Paint();
  // mPaint.setAlpha(0);
//  mPaint.setColor(Color.BLACK);
//  mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

  mPaint.setAlpha(0);
  mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

  mPaint.setAntiAlias(true);
  mPaint.setDither(true);
  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeJoin(Paint.Join.ROUND);
  mPaint.setStrokeCap(Paint.Cap.ROUND);
  mPaint.setStrokeWidth(PAINT_STROKE_WIDTH); 

  mPath = new Path();

  mBitmap = Bitmap.createBitmap(W, H, Config.ARGB_8888);
  mCanvas = new Canvas(mBitmap);
  mCanvas.drawColor(0x88000000);

 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  mCanvas.drawPath(mPath, mPaint);
  // mCanvas.drawPoint(mX, mY, mPaint);
  canvas.drawBitmap(mBitmap, X, Y, null);
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  if (!touchRect.contains((int) event.getX(), (int) event.getY())) {
  return false;
  }

  switch (event.getAction()) {
  case MotionEvent.ACTION_DOWN:
  touchDown(event.getRawX(), event.getRawY());
  touchDown(event.getX() - touchRect.left, event.getY()
   - touchRect.top);
  invalidate();
  break;
  case MotionEvent.ACTION_MOVE:
  touchMove(event.getX() - touchRect.left, event.getY()
   - touchRect.top);

  invalidate();
  break;
  case MotionEvent.ACTION_UP:
  touchUp(event.getX() - touchRect.left, event.getY()
   - touchRect.top);
  invalidate();
  break;
  default:
  break;
  }
  return true;
 }

 private void touchDown(float x, float y) {
  mPath.reset();
  mPath.moveTo(x, y);
  mX = x;
  mY = y;
 }

 private void touchMove(float x, float y) {
  float dx = Math.abs(x - mX);
  float dy = Math.abs(y - mY);
  if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
  mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
  mX = x;
  mY = y;
  }

 }

 private void touchUp(float x, float y) {
  mPath.lineTo(x, y);
  mCanvas.drawPath(mPath, mPaint);
  mPath.reset();
 }

 }
}

布局xml代码:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
>
<!--
 必须设置
 android:layout_width
 android:layout_height
 的值为常量
-->
<com.reyo.view.ScratchTextView
 android:id="@+id/rubbler"
 android:layout_y="100dip"
 android:layout_x="100dip"
  android:layout_width="100dip"
  android:layout_height="50dip"
  android:text="谢谢您"
  android:textSize="18sp"
  android:gravity="center"
  />
</AbsoluteLayout>

仿刮奖效果的控件:https://github.com/winsontan520/Android-WScratchView

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 直接拿来用的Android刮奖控件

    直接上效果图 功能特色:  1.可以设置刮开后显示文字或图片  2.可以统计已刮开区域所占百分比 Demo下载地址:RubberDemo.rar 下面是源码: @SuppressLint("HandlerLeak") public class RubberView extends TextView { private static final int W = 480; private static final int H = 800; private static final int

  • canvas实现刮刮卡效果

    目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果. 原理 在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可. 分析 demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容.本demo是用时需要改变的内

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

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

  • 分享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

  • cocos2dx实现刮奖效果

    本文实例为大家分享了cocos2dx刮奖效果实现代码,供大家参考,具体内容如下 刮奖效果其实挺简单的,需要用到RenderTexture来进行渲染,通过你所要渲染的图层,把该层的颜色进行设置混合就可以达到效果,具体看代码,我用的lua实现的. local winsize = cc.Director:sharedDirector():getWinSize(); local dataSprite = cc.Sprite:create("Star.png")--要把这个图片刮出来 dataS

  • Android仿IOS回弹效果 支持任何控件

    本文实例为大家分享了Android仿IOS回弹效果的具体代码,供大家参考,具体内容如下 效果图: 导入依赖: dependencies { // ... compile 'me.everything:overscroll-decor-android:1.0.4' } RecyclerView 支持线性布局和网格布局管理器(即所有原生Android布局).可以轻松适应支持自定义布局管理器. RecyclerView recyclerView = (RecyclerView) findViewByI

  • android 中win10 使用uwp控件实现进度条Marquez效果

    本文将告诉大家,如何做一个带文字的进度条,这个进度条可以用在游戏,现在我做的挂机游戏就使用了他. 如何做上图的效果,实际需要的是两个控件,一个是显示文字 的 TextBlock 一个是进度条. 那么如何让 文字和左边的距离变化?使用 TranslateTransform 看起来 Marquez 的界面就是: <ProgressBar x:Name="Mcdon" Maximum="100" Minimum="0" Value="2

  • Android自定义View之组合控件实现类似电商app顶部栏

    本文实例为大家分享了Android自定义View之组合控件,仿电商app顶部栏的相关代码,供大家参考,具体内容如下 效果图: 分析:左右两边可以是TextView和Button,设置drawableTop即可,中间的看着像是EditText,但是用过淘宝天猫等类似app的话会发现点击搜索不是在当前Activit进行搜索的,是跳转到另外的页面进行的,所以用TextView然后设置背景即可. 实现流程 参数列表: 设置属性文件:values下建立attrs.xml文件,添加需要自定义的属性. <?x

  • Android编程开发之TextView控件用法(2种方法)

    本文实例讲述了Android编程开发之TextView控件用法.分享给大家供大家参考,具体如下: 这里我们会讲讲常用控件的使用. 在今后的大多数章节里面也是一样的,我们会具体的说说某些控件的用法.因为只要把这些控件组合在一起它们就是一个应用了. 好吧我们直接看看这个控件怎么用. 细心的同学会发现,其实这个控件的内容是定义在values文件夹里面的strings.xml中的. 那么我们只需要给它加一段代码: 复制代码 代码如下: <string name="test">Wel

  • 总结Android中MD风格相关控件

    要使用MD风格控件,首先需要在Gradle中加入Support Design Library,例如: compile 'com.android.support:design:24.1.1' 一.CoordinatorLayout 1.CoordinatorLayout + AppBarLayout 布局文件代码如下: <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.

  • 基于Bootstrap仿淘宝分页控件实现代码

    大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就下线,很少有人会关注淘宝上的设计这类的,但是对于普通人这样还行,但是对于一个程序员这样就可不行了,因为博主本人是从事前端方面的工作,所以就通过仿照淘宝的设计样式,以求在技能上面能够有一个大的突破 一.淘宝分页控件了解 先上一张淘宝的分页图片: 根据上图中对淘宝分页控件的分析,我们大致上可以将淘宝分页控件分成两部分,一部分是核心部分,这一部分主要就是一个分页的核心功能,这个功能同时也是也是不可或缺

  • Android编程开发之Spinner控件用法实例分析

    本文实例讲述了Android编程开发之Spinner控件用法.分享给大家供大家参考,具体如下: 下拉列表 Spinner,Spinner是一个每次只能选择所有项的一个项的控件.它的项来自于与之相关联的适配器中. Spinner的使用,可以极大提高用户的体验性.当需要用户选择的时候,可以提供一个下拉列表将所有可选的项列出来.供用户选择. 一.使用数组作为数据源 布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/ap

随机推荐