你的位置:首页 > 操作系统

[操作系统]电商刮刮卡开发基础准备


  在我们的生活和学习中一定遇到过很多类似的效果,比如当我们购物时,商家为了促销,有时会采用刮奖的方式来求得大家的关注,随着移动互联网的高速发展,越来越多的电商走进了我们的视线,那么传统的刮刮卡效果如何在手机上实现呢?本篇我将为大家介绍一下这个实现的方式和方案。

  对于这个效果的实现需要用到绘图的知识,大家如果对这部分知识存在困难,建议大家首先去准备一下这方面的知识,这样可以更好的方便你对本效果的认识。ok,开始我们本篇的内容介绍:

  对于刮刮卡效果的实现,我们需要使用paint.setXfermode()来控制我们的图层显示,对于setXfermode()的16中效果,请结合下图进行掌握。

  

  在进行具体操作之前先为大家介绍一下关于圆角图片的设计方式:1、我们绘制我们的矩形(正方形)图片;2、setXferMode(srcIn);;3、绘制我们的圆形。三步就可以完成我们的效果了。我们的刮刮卡效果就是这个原理,下面我们一起来学习一下吧。

  第一步我们先实现一个画板的效果,为我们接下来的设计打一下基础,这里我们在布局文件中需要使用自定义View,所以我们的自定义View代码:

public class guagua extends View{  //定义变量  private Paint mOutterPath;//画笔对象  private Path mPath;//记录用户手指的绘制过程  private Canvas mCanvas;//画布  private Bitmap mBitmap;//图片    //记录用户绘制时的坐标值  private int mLastX = 0;  private int mLastY = 0;     public guagua(Context context) {    this(context, null);  }    public guagua(Context context, AttributeSet attrs) {    this(context, null, 0);  }    public guagua(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    //初始化变量    init();  }    /**   * 进行初始化操作   */  private void init() {    mOutterPath = new Paint();//画笔对象    mPath = new Path();//绘制过程  }  /**   * 得到控件的宽和高   */  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    int width = getMeasuredWidth();    int height = getMeasuredHeight();    //初始化我们的Bitmap(画布)对象    mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);    mCanvas = new Canvas(mBitmap);        //初始化我们的画笔属性    this.myOutterPath();  }    /**   * 初始化我们的画笔属性   */  protected void myOutterPath() {    mOutterPath.setColor(Color.BLUE);//设置画笔的颜色    mOutterPath.setAntiAlias(true);//设置锯齿    mOutterPath.setDither(true);    mOutterPath.setStrokeJoin(Paint.Join.ROUND);//圆角    mOutterPath.setStrokeCap(Paint.Cap.ROUND);    mOutterPath.setStyle(Style.STROKE);    mOutterPath.setStrokeWidth(10);//线条的宽带      }    /**   * 用户操作事件的监控   */  @Override  public boolean onTouchEvent(MotionEvent event) {    int action = event.getAction();    int x = (int) event.getX();    int y = (int) event.getY();    switch (action) {    case MotionEvent.ACTION_DOWN://按下事件      mLastX = x;      mLastY = y;      mPath.moveTo(mLastX, mLastY);      break;    case MotionEvent.ACTION_MOVE://离开事件      //判断用户绘制的是否达到一定的值      int dx = Math.abs(x - mLastX);      int dy = Math.abs(y - mLastY);      if(dx>3||dy>3){        mPath.lineTo(x, y);      }      mLastX = x;      mLastY = y;      break;    case MotionEvent.ACTION_UP://抬起事件            break;    default:      break;    }    invalidate();    return true;  }    @Override  protected void onDraw(Canvas canvas) {    drawPath();    canvas.drawBitmap(mBitmap, 0, 0, null);  }  private void drawPath() {    mCanvas.drawPath(mPath, mOutterPath);  }  }

  第二步我们需要在Layout文件中进行引用:

<cn.edu.hpu.guaguaka.guagua    android:layout_below="@id/text"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    />

  到这里我们的画板效果就实现的了,下面我们来进一步改进我们的自定义View来向我们的最终效果靠近,接下来我们实现一个类似于之前很火的小游戏:脱美女的效果。我们需要准备一张图片作为我们的美女。代码如下:

public class guagua extends View{  //定义变量  private Paint mOutterPath;//画笔对象  private Path mPath;//记录用户手指的绘制过程  private Canvas mCanvas;//画布  private Bitmap mBitmap;//图片    //记录用户绘制时的坐标值  private int mLastX = 0;  private int mLastY = 0;    //-----------------------------------  private Bitmap bitmap;     public guagua(Context context) {    this(context, null);  }    public guagua(Context context, AttributeSet attrs) {    this(context, null, 0);  }    public guagua(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    //初始化变量    init();  }    /**   * 进行初始化操作   */  private void init() {    mOutterPath = new Paint();    mPath = new Path();     //加载底层图片    bitmap = BitmapFactory.decodeResource(getResources(), com.example.guaguaka.R.drawable.girl);  }  /**   * 得到控件的宽和高   */  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    int width = getMeasuredWidth();    int height = getMeasuredHeight();    //初始化我们的Bitmap(画布)对象    mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);    mCanvas = new Canvas(mBitmap);        //初始化我们的画笔属性    this.myOutterPath();        //设置覆盖色    mCanvas.drawColor(Color.parseColor("#C0C0C0"));    //mCanvas.drawColor(Color.BLACK);      }    /**   * 初始化我们的画笔属性   */  protected void myOutterPath() {    mOutterPath.setColor(Color.RED);//设置画笔的颜色    mOutterPath.setAntiAlias(true);//设置锯齿    mOutterPath.setDither(true);    mOutterPath.setStrokeJoin(Paint.Join.ROUND);//圆角    mOutterPath.setStrokeCap(Paint.Cap.ROUND);    mOutterPath.setStyle(Style.STROKE);    mOutterPath.setStrokeWidth(20);//线条的宽带      }    /**   * 用户操作事件的监控   */  @Override  public boolean onTouchEvent(MotionEvent event) {    int action = event.getAction();    int x = (int) event.getX();    int y = (int) event.getY();    switch (action) {    case MotionEvent.ACTION_DOWN://按下事件      mLastX = x;      mLastY = y;      mPath.moveTo(mLastX, mLastY);      break;    case MotionEvent.ACTION_MOVE://离开事件      //判断用户绘制的是否达到一定的值      int dx = Math.abs(x - mLastX);      int dy = Math.abs(y - mLastY);      if(dx>3||dy>3){        mPath.lineTo(x, y);      }      mLastX = x;      mLastY = y;      break;    case MotionEvent.ACTION_UP://抬起事件            break;    default:      break;    }    invalidate();    return true;  }    @Override  protected void onDraw(Canvas canvas) {    canvas.drawBitmap(bitmap, 0, 0, null);    drawPath();    canvas.drawBitmap(mBitmap, 0, 0, null);  }  private void drawPath() {    mOutterPath.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_OUT));    mCanvas.drawPath(mPath, mOutterPath);  }  }

  需要修改的地方已经为大家进行标注,很清晰,相信大家都可以理解。对于刮刮卡的具体实现,我将在随后的介绍中带领大家一点一点的实现。