首页 > 系统 > Android > 正文

Android App中实现简单的刮刮卡抽奖效果的实例详解

2019-10-24 20:16:28
字体:
来源:转载
供稿:网友
这篇文章主要介绍了Android App中实现简单的刮刮卡抽奖效果的实例详解,文中主要借助Bitmap的canvas.drawPath的api来实现,需要的朋友可以参考下
 

主要思想:
将一个view设计成多层:背景层,含中奖信息等;
遮盖层,用于刮奖,使用关联一个Bitmap的Canvas
在该Bitmap上,使用它的canvas.drawPath的api来处理 手势滑动(类似刮奖的动作)
使用paint.setXfermode 来进行消除手势滑动区域

Android,App,刮刮卡

 

public class GuaView extends View {    private Bitmap mBitmap; //遮盖的图层   private Canvas mCanvas; //绘制遮盖图层   private Paint mOuterPaint;   private Path mPath;   private float mLastX;   private float mLastY;    private Bitmap mCoverBitmap; //遮盖图   private int mWidth, mHeight;   private Paint mInnerPaint;   private String mInfo;     public GuaView(Context context) {     this(context, null);   }    public GuaView(Context context, AttributeSet attrs) {     super(context, attrs);      init();   }    private void init() {     mPath = new Path();     mOuterPaint = new Paint();     mInnerPaint = new Paint();     mCoverBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fg_guaguaka);      mInfo = "¥ 5 0 0";   }    @Override   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {     super.onMeasure(widthMeasureSpec, heightMeasureSpec);     mWidth = mCoverBitmap.getWidth();     mHeight = mCoverBitmap.getHeight();     setMeasuredDimension(mWidth, mHeight);      mBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);     mCanvas = new Canvas(mBitmap);     mCanvas.drawBitmap(mCoverBitmap, 0, 0, null);      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();//调用onDraw     return true;   }    @Override   protected void onDraw(Canvas canvas) {     super.onDraw(canvas);      canvas.drawColor(Color.parseColor("#bbbbbb")); //背景底色 灰色     canvas.drawText(mInfo, mWidth / 2, mHeight / 4 * 3, mInnerPaint); //绘制文本     canvas.drawBitmap(mBitmap, 0, 0, null); //绘制mBitmap  这是一个可变的bitmap,通过mCanvas绘制,首先绘制了mCoverBitmap     drawPath();    }    private void drawPath() {     //使用该mode:dst和src相交后, 只保留dst,且除去相交的部份     mOuterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));     mCanvas.drawPath(mPath, mOuterPaint);   } } 

Paint.Join 连续画笔衔接时:

  •         MITER 在外边缘以一个锐角连接
  •         ROUND 以圆弧
  •         BEVEL 以直线

Paint.Cap 指定对于 线和路径(lines and paths) 的开始和结束点的处理方式:

  •         BUTT  ends with the path  不超越它
  •         ROUND  with the center at the end of the path 半圆
  •         SQUARE  with the center at the end of the path 方形


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表