快捷導(dǎo)航

簡單實現(xiàn)Android刮刮卡效果

更新時間：2017年07月23日 17:08:14 作者：chenshun310

這篇文章主要教大家如何簡單的實現(xiàn)Android刮刮卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android仿刮刮卡效果展示的具體代碼，供大家參考，具體內(nèi)容如下

一、Xfermode

通過使用Xfermode將繪制的圖形的像素和Canvas上對應(yīng)位置的像素按照一定的規(guī)則進行混合，形成新的像素，再更新到Canvas中形成最終的圖形，使用的時候都是通過Paint.setXfermode來實現(xiàn)。

二、混合模式分類

PorterDuff則是用于描述數(shù)字圖像合成的基本手法，通過組合使用Porter-Duff操作，可完成任意2D圖像的合成。

public class PorterDuff {

  // these value must match their native equivalents. See SkPorterDuff.h
  public enum Mode {
    /** [0, 0] */
    CLEAR    (0),
    /** [Sa, Sc] */
    SRC     (1),
    /** [Da, Dc] */
    DST     (2),
    /** [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] */
    SRC_OVER  (3),
    /** [Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc] */
    DST_OVER  (4),
    /** [Sa * Da, Sc * Da] */
    SRC_IN   (5),
    /** [Sa * Da, Sa * Dc] */
    DST_IN   (6),
    /** [Sa * (1 - Da), Sc * (1 - Da)] */
    SRC_OUT   (7),
    /** [Da * (1 - Sa), Dc * (1 - Sa)] */
    DST_OUT   (8),
    /** [Da, Sc * Da + (1 - Sa) * Dc] */
    SRC_ATOP  (9),
    /** [Sa, Sa * Dc + Sc * (1 - Da)] */
    DST_ATOP  (10),
    /** [Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc] */
    XOR     (11),
    /** [Sa + Da - Sa*Da,
       Sc*(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)] */
    DARKEN   (12),
    /** [Sa + Da - Sa*Da,
       Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] */
    LIGHTEN   (13),
    /** [Sa * Da, Sc * Dc] */
    MULTIPLY  (14),
    /** [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] */
    SCREEN   (15),
    /** Saturate(S + D) */
    ADD     (16),
    OVERLAY   (17);

    Mode(int nativeInt) {
      this.nativeInt = nativeInt;
    }

    /**
     * @hide
     */
    public final int nativeInt;
  }

1、SRC類，優(yōu)先顯示的是源圖片。SRC_IN處理圖片相交區(qū)域時，受到目標圖片的Alpha值影響，當我們的目標圖片為空白像素的時候，源圖片也會變成空白，簡單的來說就是用目標圖片的透明度來改變源圖片的透明度和飽和度，當目標圖片的透明度為0時，源圖片就不會顯示。SRC_OUT用我們目標圖片的透明度的補值來改變源圖片的透明度和飽和度,當目標圖片的透明度為不透明時，源圖片就不會顯示。SRC_ATOP當透明度為100%和0%時，SRC_IN和SRC_ATOP是通用的，當透明度不為上述的兩個值時，SRC_ATOP比SRC_IN源圖像的飽和度會增加，變得更亮一些。

2、DST類，優(yōu)先顯示的是目標圖片。DST_IN在相交的時候以源圖片的透明度來改變目標圖片的透明度和飽和度，當源圖片的透明度為0的時候，目標圖片完全不顯示。

3、其它的疊加效果，MULTIPLY可以把圖片的輪廓取出來，LIGHTEN變亮效果。

三、刮刮卡效果

1、效果圖

這里寫圖片描述

2、實現(xiàn)思路
利用PorterDuffXfermode中的模式SRC_OUT，先繪制最終呈現(xiàn)的圖片并將圖層保存起來，然后將手指移動的軌跡渲染到畫布上，并繪制目標圖片到畫布上，最后用目標圖片的透明度的補值來改變源圖片的透明值，將最終呈現(xiàn)的圖片顯示在屏幕上。

3、代碼實例

public class GuaCardView extends View {

  private Bitmap mSrcText;
  private Bitmap mSrcBitmap;
  private Bitmap mDstBitmap;
  private Paint mPaint;
  private Path mPath;
  private float mStartX,mStartY;

  public GuaCardView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setLayerType(LAYER_TYPE_SOFTWARE,null);
    mPaint = new Paint();
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(45);
    mSrcText = BitmapFactory.decodeResource(getResources(), R.drawable.guaguaka_text1);
    mSrcBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.guaguaka);
    mDstBitmap = Bitmap.createBitmap(mSrcBitmap.getWidth(),mSrcBitmap.getHeight(), Bitmap.Config.ARGB_8888);
    mPath = new Path();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //畫最終呈現(xiàn)的圖
    canvas.drawBitmap(mSrcText,0,0,mPaint);
    int layerId = canvas.saveLayer(0,0,getWidth(),getHeight(),null,Canvas.ALL_SAVE_FLAG);
    //把手指軌跡畫到畫布上
    Canvas c = new Canvas(mDstBitmap);
    c.drawPath(mPath,mPaint);
    //利用SRC_OUT繪制原圖
    canvas.drawBitmap(mDstBitmap,0,0,mPaint);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
    canvas.drawBitmap(mSrcBitmap,0,0,mPaint);
    mPaint.setXfermode(null);
    canvas.restoreToCount(layerId);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    switch(event.getAction()){
      case MotionEvent.ACTION_DOWN:
        mPath.moveTo(event.getX(),event.getY());
        mStartX = event.getX();
        mStartY = event.getY();
        return true;
      case MotionEvent.ACTION_MOVE:
        float endX = (mStartX+event.getX())/2;
        float endY = (mStartY+event.getY())/2;
        mPath.quadTo(mStartX,mStartY,endX,endY);
        mStartX = event.getX();
        mStartY = event.getY();
        break;
      default:
        break;
    }
    postInvalidate();
    return super.onTouchEvent(event);
  }
}

以

上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: