首页 > 代码库 > Andriod实现刮刮卡的效果
Andriod实现刮刮卡的效果
思想:
将一个View设计成多层,内层(包含中奖信息)和外层(用于刮奖),外层的图层用Canvas与一个Bitmap关联,用这个关联的Bitmap来处理手势的滑动。类似于刮奖的动作。
使用paint.setXfermode 来进行消除手势滑动区域
package com.jackie.guaguale; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; 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.util.AttributeSet; import android.view.MotionEvent; import android.view.View; /** * Created by Administrator on 2015/7/29. */ public class GuaView extends View { private Path mPath; private Paint mInnerPaint; //内层图层Paint private Paint mOuterPaint; //外层图层Paint private Bitmap mGuaBitmap; //用于处理刮奖的Bitmap private Bitmap mOuterBitmap; //外层图层Bitmap private Canvas mCanvas; private int mWidth, mHeight; private float mLastX; private float mLastY; private String mText; public GuaView(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { mPath = new Path(); mOuterPaint = new Paint(); mInnerPaint = new Paint(); //创建外层图层 mOuterBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.guaguaka).copy(Bitmap.Config.ARGB_8888, true); mText = "¥500"; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = mOuterBitmap.getWidth(); mHeight = mOuterBitmap.getHeight(); //创建内层图层 mGuaBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mGuaBitmap); mCanvas.drawBitmap(mOuterBitmap, 0, 0, null); //将mOuterBitmap画到mCanvas上,与mGuaBitmap关联 setOuterPaint(); setInnerPaint(); } private void setInnerPaint() { mInnerPaint.setColor(Color.RED); mInnerPaint.setStyle(Paint.Style.STROKE); mInnerPaint.setStrokeCap(Paint.Cap.ROUND); mInnerPaint.setStrokeJoin(Paint.Join.ROUND); mInnerPaint.setAntiAlias(true); mInnerPaint.setDither(true); //防抖 mInnerPaint.setStrokeWidth(5); mInnerPaint.setTextSize(100); mInnerPaint.setTextAlign(Paint.Align.CENTER); } private void setOuterPaint() { mOuterPaint.setColor(Color.GREEN); mOuterPaint.setStyle(Paint.Style.STROKE); mOuterPaint.setStrokeCap(Paint.Cap.ROUND); mOuterPaint.setStrokeJoin(Paint.Join.ROUND); mOuterPaint.setAntiAlias(true); mOuterPaint.setDither(true); //防抖 mOuterPaint.setStrokeWidth(20); } @Override //Path public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mLastX = x; mLastY = y; mPath.moveTo(x, y); break; case MotionEvent.ACTION_MOVE: float deltaX = Math.abs(x - mLastX); float deltaY = Math.abs(y - mLastY); if (deltaX > 5 || deltaY > 5) { mPath.lineTo(x, y); } mLastX = x; mLastY = y; break; case MotionEvent.ACTION_UP: break; } invalidate(); return true; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawColor(Color.parseColor("#bbbbbb")); //背景底色 灰色 canvas.drawText(mText, mWidth / 2, mHeight / 4 * 3, mInnerPaint); //绘制文本 canvas.drawBitmap(mGuaBitmap, 0, 0, null); //绘制外层Bitmap, 将mBitmap显示在界面上 drawPath(); } private void drawPath() { //使用该mode:dst和src相交后, 仅仅保留dst,且除去相交的部份 mOuterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); mCanvas.drawPath(mPath, mOuterPaint); } }
效果图例如以下:
Andriod实现刮刮卡的效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。