Android 刮刮卡原理

個人做個記錄，無意從研發變成了產品，現在回頭做做**，練練生手。

只看刮的原理，很簡單。需要知道的核心就1個：paint.setxfermode。

基本原理：

一共分兩層，如下圖，上面一層用於刮，下面一層用於顯示。演示**為偷懶的方式用兩個控制項層疊，實際應該使用自定義控制項繪製。

刮獎層在觸控時，使用paint.setxfermode在刮獎層繪製，達到部分透明的目的。

動手：

1. 布局，就類似上圖，兩個控制項層疊（實際請自行繪製自定義控制項，如**本來應該只有guaguacard）

<?xml version="1.0" encoding="utf-8"?>

2. 建立刮獎層自定義控制項

刮獎層自定義控制項的原理是，建立乙個灰色的繪製到canvas，在觸控事件中不端的使用path在上繪製「擦除區域」，實際是xfermode的dst_out模式。

1）初始化繪製蒙層的畫筆

/**

* 初始化畫筆
*/private void init() 

2）繪製好基本的蒙層

@override

protected void onmeasure(int widthmeasurespec, int heightmeasurespec) 

3） 在手指移動時繪製擦除區域

@override

public boolean ontouchevent(motionevent event) 
//移動時繪製直線，即擦除區域
case motionevent.action_move:
x = math.abs(event.getx() - x);
y = math.abs(event.gety() - y);
mpath.lineto(x, y);
break;
case motionevent.action_up:
case motionevent.action_cancel:
default:
break;
}//繪製
invalidate();
return true;
}@override
protected void ondraw(canvas canvas) 

這樣基本就能夠把刮獎層搞定，那後面的，要是一時想不清楚，可以嘗試

刮刮卡效果

import android.content.context import android.graphics.bitmap import android.graphics.bitmapfactory import android.graphics.canvas import android.grap...

刮刮卡效果

利用兩個canvas 疊加，從而實現刮刮卡效果。canvas id downcanvas canvas canvas id upcanvas canvas container page main article section upcanvas touchy.js是用於移動端觸控事件的封裝外掛程式。...

canvas實現刮刮卡

canvas上下文物件的globalcompositeoperation屬性 刮刮卡功能主要是使用這個值的設定來實現的，之前介紹過globalcompositeoperation屬性共有11種值，詳細介紹可以訪問html 5 canvas 參考手冊 這裡簡單的對11種值做一下截圖 他這裡寫的源物件可...