android实现刮奖的效果

突发奇想,实现类似于刮彩票的效果,于是完成了一个小例子,其中有不完善的地方,比如判断彩票是否中奖是以是否刮彩票3次判断的,而不是以面积来计算的。

核心部分是借鉴网上代码的,不过找不到源地址了。

示例图:



代码如下:

ErnieActivity类:

public class ErnieActivity extends Activity{
	Button erniebtn;
	RelativeLayout container;
	ErinieShow erinieShow;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		erniebtn=(Button) findViewById(R.id.erniebtn);
		container=(RelativeLayout) findViewById(R.id.container);
		
		erniebtn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				showErnie();
			}
		});
		
		
	}

	
	private void showErnie(){
//		container
		container.removeAllViews();
		
		int level = getLevel();
		erinieShow=new ErinieShow(this, level);
		
		container.addView(erinieShow,new LayoutParams(-2,-2));
	}
	
	/**
	 * 获取奖励等级
	 * @return
	 */
	public int getLevel(){
		//随机,看看几等奖
		double d=Math.random()*100;
		if(d<50){
			return 0;
		}
		if(d<80){
			return 3;
		}
		if(d<95){
			return 2;
		}
		return 1;
				
	}
	
	@Override
	protected void onDestroy() {
		super.onDestroy();
	}

}

ErinieShow类:

public class ErinieShow extends RelativeLayout {
	Context context;
	RelativeLayout rubblerBG;
	RubblerShow rubblerShow;
	Button getReward;

	int rubblerBGId = 10001;
	int getRewardId = 10002;

	int level;

	public ErinieShow(Context context, int level) {
		super(context);
		this.context = context;
		this.level = level;
		getElement();
		setElementLP();
		setElementStyle();
		setElement();
	}

	private void getElement() {
		rubblerBG = new RelativeLayout(context);
		rubblerShow = new RubblerShow(context,handler);
		getReward = new Button(context);

		rubblerBG.setId(rubblerBGId);
		getReward.setId(getRewardId);
		rubblerBG.addView(rubblerShow);
		addView(rubblerBG);
		addView(getReward);
	}

	private void setElementLP() {
		int[] resolution = PhoneUtil.getResolution(context);
		RelativeLayout.LayoutParams rubblerBG_LP = new RelativeLayout.LayoutParams(
				resolution[0], PhoneUtil.getFitHeight(context, 125));

		rubblerBG.setLayoutParams(rubblerBG_LP);
		rubblerShow.setLayoutParams(rubblerBG_LP);
		
		RelativeLayout.LayoutParams getReward_LP = new LayoutParams(-2, -2);
		getReward_LP.addRule(RelativeLayout.CENTER_HORIZONTAL);
		getReward_LP.addRule(RelativeLayout.BELOW,rubblerBGId);
		getReward.setLayoutParams(getReward_LP);
		
	}

	private void setElementStyle() {
		switch (level) {
		case 0:
			rubblerBG.setBackgroundResource(R.drawable.rewardlevel0);

			break;
		case 1:
			rubblerBG.setBackgroundResource(R.drawable.rewardlevel1);

			break;
		case 2:
			rubblerBG.setBackgroundResource(R.drawable.rewardlevel2);
			break;
		default:
			rubblerBG.setBackgroundResource(R.drawable.rewardlevel3);
			break;
		}
//		getReward.setBackgroundResource(R.drawable.get_award);
	}

	private void setElement() {
		rubblerShow.beginRubbler(Color.parseColor("#d3d3d3"), 30, 10);
		
		
		getReward.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				if(level==0){
					Toast.makeText(context, "很遗憾,此次未中奖,再接再厉吧!", Toast.LENGTH_SHORT).show();
				}else{
					Toast.makeText(context, "恭喜您,获得了"+level+"等奖。", Toast.LENGTH_SHORT).show();
				}
			}
		});
		//先设置为不可点击
		getReward.setClickable(false);
		
		getReward.setText("领奖");
	}
	
	Handler handler=new Handler(){

		@Override
		public void handleMessage(Message msg) {
			super.handleMessage(msg);
			if(msg.what==200){
				getReward.setClickable(true);
			}else{
				
			}
			
		}
		
	};

}

RubblerShow类:

public class RubblerShow extends TextView {

	private float TOUCH_TOLERANCE; // 填充距离,使线条更自然,柔和,值越小,越柔和。

	// private final int bgColor;

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

	private boolean isDraw = false;
	
	Handler handler;
	int time=0;
	
	public RubblerShow(Context context, Handler handler) {
		super(context);
		this.handler=handler;
		// bgColor =
		// attrs.getAttributeIntValue("http://schemas.android.com/apk/res/android",
		// "textColor", 0xFFFFFF);
		// System.out.println(bgColor);
		// System.out.println(attrs.getAttributeValue("http://schemas.android.com/apk/res/android",
		// "layout_width"));
	}

	@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 beginRubbler(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();
		// 覆盖
		LayoutParams layoutParams = getLayoutParams();
		int height = layoutParams.height;
		int width;
		if (getLayoutParams().width == LayoutParams.MATCH_PARENT) {
			width = 700;
		} else {
			width = layoutParams.width;
		}

		mBitmap = Bitmap.createBitmap(width, 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.getRawX(),event.getRawY());
			touchDown(event.getX(), event.getY());
			invalidate();
			break;
		case MotionEvent.ACTION_MOVE: // 触点移动
			touchMove(event.getX(), event.getY());
			invalidate();
			if(time++>3&&handler!=null){
				handler.sendEmptyMessage(200);
			}
			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();
	}

}

下载地址:

http://download.csdn.net/detail/aa5279aa/7316415




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
实现刮奖效果,可以使用 Vue3 中的 `<canvas>` 标签来绘制刮奖区域和遮罩层,然后通过监听用户的鼠标或手指移动事件来擦除遮罩层,从而实现刮奖效果。 下面是一个简单的实现示例: ```vue <template> <div class="scratch-card"> <canvas ref="canvas" class="scratch-card__canvas"></canvas> </div> </template> <script> import { onMounted, onUnmounted, ref } from 'vue'; export default { name: 'ScratchCard', setup() { const canvasRef = ref(null); let ctx = null; let isDrawing = false; const handleStart = (e) => { isDrawing = true; ctx.beginPath(); ctx.moveTo(e.clientX, e.clientY); }; const handleMove = (e) => { if (isDrawing) { ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); } }; const handleEnd = () => { isDrawing = false; }; onMounted(() => { const canvas = canvasRef.value; ctx = canvas.getContext('2d'); // 绘制刮奖区域 ctx.fillStyle = '#888'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制遮罩层 ctx.fillStyle = '#f00'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 监听鼠标或手指移动事件 canvas.addEventListener('mousedown', handleStart); canvas.addEventListener('mousemove', handleMove); canvas.addEventListener('mouseup', handleEnd); canvas.addEventListener('touchstart', handleStart); canvas.addEventListener('touchmove', handleMove); canvas.addEventListener('touchend', handleEnd); }); onUnmounted(() => { const canvas = canvasRef.value; canvas.removeEventListener('mousedown', handleStart); canvas.removeEventListener('mousemove', handleMove); canvas.removeEventListener('mouseup', handleEnd); canvas.removeEventListener('touchstart', handleStart); canvas.removeEventListener('touchmove', handleMove); canvas.removeEventListener('touchend', handleEnd); }); return { canvasRef, }; }, }; </script> <style scoped> .scratch-card { position: relative; width: 300px; height: 200px; } .scratch-card__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> ``` 在这个示例中,我们使用 `<canvas>` 标签来创建一个刮奖区域,它的背景颜色是灰色的。然后,我们使用相同的大小和位置创建一个遮罩层,它的背景颜色是红色的。 在 `setup` 函数中,我们使用 `onMounted` 和 `onUnmounted` 生命周期钩子来监听鼠标或手指移动事件,并在事件处理程序中绘制用户的刮奖轨迹。我们还使用 `ref` 函数来创建一个引用,以便在模板中访问 `<canvas>` 元素。 最后,我们将组件的样式设置为相对定位,以便它的子元素(即 `<canvas>` 元素)可以使用绝对定位来覆盖它。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

失落夏天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值