快捷導(dǎo)航

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

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

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

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

一、Xfermode

通過使用Xfermode將繪制的圖形的像素和Canvas上對(duì)應(yīng)位置的像素按照一定的規(guī)則進(jìn)行混合，形成新的像素，再更新到Canvas中形成最終的圖形，使用的時(shí)候都是通過Paint.setXfermode來實(shí)現(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ū)域時(shí)，受到目標(biāo)圖片的Alpha值影響，當(dāng)我們的目標(biāo)圖片為空白像素的時(shí)候，源圖片也會(huì)變成空白，簡單的來說就是用目標(biāo)圖片的透明度來改變?cè)磮D片的透明度和飽和度，當(dāng)目標(biāo)圖片的透明度為0時(shí)，源圖片就不會(huì)顯示。SRC_OUT用我們目標(biāo)圖片的透明度的補(bǔ)值來改變?cè)磮D片的透明度和飽和度,當(dāng)目標(biāo)圖片的透明度為不透明時(shí)，源圖片就不會(huì)顯示。SRC_ATOP當(dāng)透明度為100%和0%時(shí)，SRC_IN和SRC_ATOP是通用的，當(dāng)透明度不為上述的兩個(gè)值時(shí)，SRC_ATOP比SRC_IN源圖像的飽和度會(huì)增加，變得更亮一些。

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

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

三、刮刮卡效果

1、效果圖

這里寫圖片描述

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

3、代碼實(shí)例

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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: