Android 撕衣服（刮刮樂遊戲）

標籤：不能   split   imageview   ide   move   app   getheight   螢幕   控制項   

項目簡介：

　　該項目為撕衣服,類似刮刮樂遊戲

詳細介紹：

使用者啟動項目後，載入一張圖片，當使用者點擊圖片的時候，點擊的一片地區就會消失，從而顯示出在這張圖片下面的圖片
這個小遊戲類似與刮獎一樣，刮開塗層就會顯示文字。
這裡則是撕掉美女身上的衣服，漏出裡面的圖片。

該應用涉及到的知識有：

• 1.如何?畫圖功能
• 2.如何把像素點變為透明色
• 3.如何監聽手機對螢幕的操作
  　　　主要有觸擊，滑動，離開三種情況

注意：

• 1.一定要注意在設定像素點的時候，範圍不能超過當前控制項的範圍
• 2.設定ImageView最好設定為wrap_content，如果設定為match_parent，可能導致圖片旁邊留白，影響定位
  　　例如：如果圖片寬距離ImageView組件為20dp（即圖片兩遍的留白為20dp），當手指移動到（36,0）位置時候，根據該題代碼，可以計算出：
  　　實際上是把以（16,0）為圓心，半徑為8的圓形地區的像素點顏色變為透明色，而不是（36,0）附近

步驟：1.建立一個android的項目，編寫activity_main.xml檔案的代碼：

<RelativeLayout 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"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="hhh.exercise.smultimedia_d.MainActivity" >    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/aneiyi" />    <ImageView        android:id="@+id/iv"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></RelativeLayout>

這裡實際上就是建立兩個ImageView控制項，並且兩個控制項重疊在一起，介面如下所示：

2.編寫MainActivity代碼：

import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Matrix;import android.graphics.Paint;import android.os.Bundle;import android.view.MotionEvent;import android.view.View;import android.view.View.OnTouchListener;import android.widget.ImageView;public class MainActivity extends Activity {    private ImageView iv;    private Bitmap bmCopy;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        iv = (ImageView) findViewById(R.id.iv);        // 建立唯讀Bitmap對象        Bitmap bmSrc = BitmapFactory.decodeResource(getResources(), R.drawable.awaiyi);        bmCopy = Bitmap.createBitmap(bmSrc.getWidth(), bmSrc.getHeight(), bmSrc.getConfig());        // 建立Paint對象        Paint paint = new Paint();        // 建立Canvas對象        Canvas canvas = new Canvas(bmCopy);        // 開始繪畫        canvas.drawBitmap(bmSrc, new Matrix(), paint);        // 載入最外層圖片        iv.setImageBitmap(bmCopy);        // 設定觸摸偵聽        iv.setOnTouchListener(new OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                switch (event.getAction()) {                case MotionEvent.ACTION_MOVE:                    // 擷取當前手指所在的座標                    int x = (int) event.getX();                    int y = (int) event.getY();                    // 取當前座標的一片地區（這裡以點錢座標為原點，半徑為5的做一個圓形地區）                    int r = 8;                    for (int i = -r; i <= r; i++) {                        for (int j = -r; j <= r; j++) {                            if (Math.sqrt(i*i+ j*j) <= r) {                                // 判斷目前範圍的點是否在ImageView控制項範圍內，在就執行下面操作，不在就什麼也不做                                if (x + i < bmCopy.getWidth() && x + i > 0 && y + j < bmCopy.getHeight() && y + j > 0) {                                    // 把使用者划過的座標點的像素設為透明色                                    bmCopy.setPixel(x + i, y + j, Color.TRANSPARENT);                                    // 將圖片顯示在介面上                                    iv.setImageBitmap(bmCopy);                                }                            }                        }                    }                }                return true;            }        });    }}

最後，部署後，隨便點幾下螢幕，效果就是這樣：

Android 撕衣服（刮刮樂遊戲）