在淘寶、京東等電商舉辦活動的時候，經常可以看到在移動客戶端推出的各種刮獎活動，而這種活動也受到了很多人的喜愛。從客戶端的體驗來說，這種效果應該是通過網頁來實現的，那么，我們使用Android的自帶控件能不能實現這種刮刮樂的效果呢？當然可以，本篇文章將介紹使用Canvas這個對象，如何實現“刮刮樂”的效果。
先看效果圖
下面我們看一下如何使用代碼實現
布局文件
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/after" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/a" /> <ImageView android:id="@+id/before" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/b" /> </FrameLayout>
Activity代碼
public class MainActivity extends Activity implements OnTouchListener { private ImageView imgafter; private ImageView imgbefore; private Canvas canvas; private Paint paint; private Bitmap bitmap; private Bitmap before; private Bitmap after; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imgafter = (ImageView) findViewById(R.id.after); imgbefore = (ImageView) findViewById(R.id.before); // 獲得圖片 after = BitmapFactory.decodeResource(getResources(), R.drawable.a); before = BitmapFactory.decodeResource(getResources(), R.drawable.b); imgafter.setImageBitmap(after); imgbefore.setImageBitmap(before); // 創建可以修改的空白的bitmap bitmap = Bitmap.createBitmap(before.getWidth(), before.getHeight(), before.getConfig()); imgbefore.setOnTouchListener(this); paint = new Paint(); paint.setStrokeWidth(5); paint.setColor(Color.BLACK); // 創建畫布 canvas = new Canvas(bitmap); canvas.drawBitmap(before, new Matrix(), paint); } @Override public boolean onTouch(View arg0, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_MOVE: int newX = (int) event.getX(); int newY = (int) event.getY(); // 將滑過的地方變為透明 for (int i = -10; i < 10; i++) { for (int j = -10; j < 10; j++) { if ((i + newX) >= before.getWidth() || j + newY >= before.getHeight() || i + newX < 0 || j + newY < 0) { return false; } bitmap.setPixel(i + newX, j + newY, Color.TRANSPARENT); } } imgbefore.setImageBitmap(bitmap); break; } return true; } } 可以看到，代碼很簡單，幾十行代碼就實現了簡單的“刮刮樂”的效果。
原理是這樣的，一開始兩張圖片重疊，顯示的還沒有刮開的效果。
在Activity的onTouch方法中，我們對滑動事件進行監聽，當用戶用手指滑動屏幕的時候，我們將滑過的畫布部分的顏色設置為透明，同時，把改變之后的bitmap對象設置為ImageView的背景，這樣，隱藏在后面的圖片就顯示出來了，也就實現了刮刮樂的效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
