首页 > 其他分享 >刮刮卡效果

刮刮卡效果

时间:2023-04-06 21:32:15浏览次数:65  
标签:效果 float private mPaint 刮刮卡 import android event



刮刮卡效果_Math



刮刮卡类:

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 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


  • 刮刮卡效果_ide_02

  • 大小: 25 KB
  • Rubbler.zip (255.4 KB)
  • 下载次数: 89
  • FingerPaint.zip (980.2 KB)
  • 描述: 参考这个写的
  • 下载次数: 63
  • 查看图片附件

标签:效果,float,private,mPaint,刮刮卡,import,android,event
From: https://blog.51cto.com/u_5454003/6174180

相关文章

  • 左边可拖出菜单(页面)效果
    这个效果现在很多软件都实现了,其实说穿了很简单的。就是一个动画,做的地道点的加一个手势拖拉效果。我写的代码(未参考任何代码,不知道别人怎么实现的。):importjava.util.ArrayList;importandroid.content.Context;importandroid.os.Bundle;importandroid.util.Log;import......
  • 直播电商平台开发,用el-checkout-group实现穿梭框el-transfer效果
    直播电商平台开发,用el-checkout-group实现穿梭框el-transfer效果一:页面构建 <el-form-itemlabel="选择模块:"prop="pubTime">  <divclass="app-select">   <divclass="list">    <el-inputv-model="searchWord&qu......
  • EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图
    使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了。刚刚开始很混乱,等加载完成后,就好了。    $.parser.onComplete,这个是在所有组件解析完成后执行的事件。其实这个事件很有用的。很多在布局用到easyui的时候总会出现一个问题。就是在一进入主界面的时候,页......
  • web前端tips:CSS之sticky粘滞效果
    Sticky介绍Sticky是CSS3的一个定位属性,它可以让元素在滚动过程中“粘”在屏幕上的某个位置,直到滚动到某个临界点后才会跟随滚动。Sticky定位可以使得页面更具交互性和易用性,也提高了页面的可读性。Sticky定位可以通过以下代码实现:position:sticky;top:0;其中,top属性定义了......
  • vue引入粒子背景图效果
    安装依赖npminstallvue-particles--save-devmain.jsimportVueParticlesfrom'vue-particles'Vue.use(VueParticles)template  <vue-particles     color="#409EFF"     :particleOpacity="0.7"     :parti......
  • CAD更改线宽后没有变化效果怎么办?
    CAD更改线宽后没有变化效果怎么办?在我们调整CAD图纸样条线线宽的过程中,有可能会遇到更改CAD线宽没反应的情况,这种不显示的情况要怎么解决呢?本期,就和一起看看CAD更改线宽后不显示变化的原因和解决方法吧!CAD更改线宽后没有变化效果怎么办?CAD更改线宽后没反应的原因是因为CAD......
  • 免费广告效果监测服务,实现全链路营销效果跟踪
    广告主们都希望以低预算获得更高的广告投放收益,在投放广告后,想要了解高回报的渠道,往往需要收集并分析繁杂的数据,耗时耗力。通过广告监测,广告主可以准确的追溯用户渠道来源,看到不同流量的用户价值,分析广告投放效果,从而指导广告的出价和投放素材的优化,把预算花在刀刃上。针对广告主......
  • 4.7 app.mount的作用效果
    这里msg的效果,在app.mount('#box')后就被覆盖掉了<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><body><divid="box">......
  • [计算机图形学] OpenGL读取obj文件并显示其3D效果
       读取三维网格模型(WavefrontOBJ文件)无法向立方体:cube.obj有法向兔子模型:bunny.obj有法向有纹理八字模型:Eight.objOBJ文件的格式可参考:http://www.cnblogs.com/youthlion/archive/2013/01/21/2870451.html 利用OpenGL显示该模型的绘制效果(全部)顶点显示线条显示面片显示 核心......
  • [oeasy]python0124_Code_page_437_IBM_5150_点阵式字形码_显示器效果
    字符显示器回忆上次内容简体和繁体的汉字字符数量都超级大感谢王选和陈堃銶等前辈发明了激光照排技术中文排版从此使用上了gb2312编码 ​ 添加图片注释,不超过140字(可选) 纸张之外显示器是更先进的输出设备 计算机是......