電商刮刮卡開發基礎準備，電商刮刮卡基礎

電商刮刮卡開發基礎準備，電商刮刮卡基礎

　　在我們的生活和學習中一定遇到過很多類似的效果，比如當我們購物時，商家為了促銷，有時會採用刮獎的方式來求得大家的關注，隨著移動互連網的高速發展，越來越多的電商走進了我們的視線，那麼傳統的刮刮卡效果如何在手機上實現呢？本篇我將為大家介紹一下這個實現的方式和方案。

　　對於這個效果的實現需要用到繪圖的知識，大家如果對這部分知識存在困難，建議大家首先去準備一下這方面的知識，這樣可以更好的方便你對本效果的認識。ok，開始我們本篇的內容介紹：

　　對於刮刮卡效果的實現，我們需要使用paint.setXfermode()來控制我們的圖層顯示，對於setXfermode()的16中效果，請結合進行掌握。

　　

　　在進行具體操作之前先為大家介紹一下關於圓角圖片的設計方式：1、我們繪製我們的矩形（正方形）圖片；2、setXferMode(srcIn);；3、繪製我們的圓形。三步就可以完成我們的效果了。我們的刮刮卡效果就是這個原理，下面我們一起來學習一下吧。

　　第一步我們先實現一個畫板的效果，為我們接下來的設計打一下基礎，這裡我們在布局檔案中需要使用自訂View，所以我們的自訂View代碼：

public class guagua extends View{    //定義變數    private Paint mOutterPath;//畫筆對象    private Path mPath;//記錄使用者手指的繪製過程    private Canvas mCanvas;//畫布    private Bitmap mBitmap;//圖片        //記錄使用者繪製時的座標值    private int mLastX = 0;    private int mLastY = 0;         public guagua(Context context) {        this(context, null);    }        public guagua(Context context, AttributeSet attrs) {        this(context, null, 0);    }        public guagua(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        //初始設定變數        init();    }        /**     * 進行初始化操作     */    private void init() {        mOutterPath = new Paint();//畫筆對象        mPath = new Path();//繪製過程    }    /**     * 得到控制項的寬和高     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int width = getMeasuredWidth();        int height = getMeasuredHeight();        //初始化我們的Bitmap(畫布)對象        mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);        mCanvas = new Canvas(mBitmap);                //初始化我們的畫筆屬性        this.myOutterPath();    }        /**     * 初始化我們的畫筆屬性     */    protected void myOutterPath() {        mOutterPath.setColor(Color.BLUE);//設定畫筆的顏色        mOutterPath.setAntiAlias(true);//設定鋸齒        mOutterPath.setDither(true);        mOutterPath.setStrokeJoin(Paint.Join.ROUND);//圓角        mOutterPath.setStrokeCap(Paint.Cap.ROUND);        mOutterPath.setStyle(Style.STROKE);        mOutterPath.setStrokeWidth(10);//線條的寬頻            }        /**     * 使用者操作事件的監控     */    @Override    public boolean onTouchEvent(MotionEvent event) {        int action = event.getAction();        int x = (int) event.getX();        int y = (int) event.getY();        switch (action) {        case MotionEvent.ACTION_DOWN://按下事件            mLastX = x;            mLastY = y;            mPath.moveTo(mLastX, mLastY);            break;        case MotionEvent.ACTION_MOVE://離開事件            //判斷使用者繪製的是否達到一定的值            int dx = Math.abs(x - mLastX);            int dy = Math.abs(y - mLastY);            if(dx>3||dy>3){                mPath.lineTo(x, y);            }            mLastX = x;            mLastY = y;            break;        case MotionEvent.ACTION_UP://抬起事件                        break;        default:            break;        }        invalidate();        return true;    }        @Override    protected void onDraw(Canvas canvas) {        drawPath();        canvas.drawBitmap(mBitmap, 0, 0, null);    }    private void drawPath() {        mCanvas.drawPath(mPath, mOutterPath);    }    }

　　第二步我們需要在Layout檔案中進行引用：

<cn.edu.hpu.guaguaka.guagua        android:layout_below="@id/text"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        />

　　到這裡我們的畫板效果就實現的了，下面我們來進一步改進我們的自訂View來向我們的最終效果靠近，接下來我們實現一個類似於之前很火的小遊戲：脫美女的效果。我們需要準備一張圖片作為我們的美女。代碼如下：

public class guagua extends View{    //定義變數    private Paint mOutterPath;//畫筆對象    private Path mPath;//記錄使用者手指的繪製過程    private Canvas mCanvas;//畫布    private Bitmap mBitmap;//圖片        //記錄使用者繪製時的座標值    private int mLastX = 0;    private int mLastY = 0;        //-----------------------------------    private Bitmap bitmap;         public guagua(Context context) {        this(context, null);    }        public guagua(Context context, AttributeSet attrs) {        this(context, null, 0);    }        public guagua(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        //初始設定變數        init();    }        /**     * 進行初始化操作     */    private void init() {        mOutterPath = new Paint();        mPath = new Path();         //載入底層圖片        bitmap = BitmapFactory.decodeResource(getResources(), com.example.guaguaka.R.drawable.girl);    }    /**     * 得到控制項的寬和高     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int width = getMeasuredWidth();        int height = getMeasuredHeight();        //初始化我們的Bitmap(畫布)對象        mBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);        mCanvas = new Canvas(mBitmap);                //初始化我們的畫筆屬性        this.myOutterPath();                //設定覆蓋色        mCanvas.drawColor(Color.parseColor("#C0C0C0"));        //mCanvas.drawColor(Color.BLACK);            }        /**     * 初始化我們的畫筆屬性     */    protected void myOutterPath() {        mOutterPath.setColor(Color.RED);//設定畫筆的顏色        mOutterPath.setAntiAlias(true);//設定鋸齒        mOutterPath.setDither(true);        mOutterPath.setStrokeJoin(Paint.Join.ROUND);//圓角        mOutterPath.setStrokeCap(Paint.Cap.ROUND);        mOutterPath.setStyle(Style.STROKE);        mOutterPath.setStrokeWidth(20);//線條的寬頻            }        /**     * 使用者操作事件的監控     */    @Override    public boolean onTouchEvent(MotionEvent event) {        int action = event.getAction();        int x = (int) event.getX();        int y = (int) event.getY();        switch (action) {        case MotionEvent.ACTION_DOWN://按下事件            mLastX = x;            mLastY = y;            mPath.moveTo(mLastX, mLastY);            break;        case MotionEvent.ACTION_MOVE://離開事件            //判斷使用者繪製的是否達到一定的值            int dx = Math.abs(x - mLastX);            int dy = Math.abs(y - mLastY);            if(dx>3||dy>3){                mPath.lineTo(x, y);            }            mLastX = x;            mLastY = y;            break;        case MotionEvent.ACTION_UP://抬起事件                        break;        default:            break;        }        invalidate();        return true;    }        @Override    protected void onDraw(Canvas canvas) {        canvas.drawBitmap(bitmap, 0, 0, null);        drawPath();        canvas.drawBitmap(mBitmap, 0, 0, null);    }    private void drawPath() {        mOutterPath.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_OUT));        mCanvas.drawPath(mPath, mOutterPath);    }    }

　　需要修改的地方已經為大家進行標註，很清晰，相信大家都可以理解。對於刮刮卡的具體實現，我將在隨後的介紹中帶領大家一點一點的實現。