快捷導(dǎo)航

Android刮刮卡實(shí)現(xiàn)原理與代碼講解

更新時(shí)間：2016年04月21日 16:32:20 作者：ZL_LZ

這篇文章主要為大家詳細(xì)介紹了Android刮刮卡實(shí)現(xiàn)原理、實(shí)現(xiàn)原理步驟以及代碼講解，感興趣的小伙伴們可以參考一下

實(shí)現(xiàn)刮刮卡我們可以Get到哪些技能？

* 圓形圓角圖片的實(shí)現(xiàn)原理
* 雙緩沖技術(shù)繪圖
* Bitmap獲取像素值數(shù)據(jù)
* 獲取繪制文本的長(zhǎng)寬
* 自定義View的掌握
* 獲取屏幕密度
* TypeValue.applyDemension
* Canvas的一些繪制方法
* Paint的一些常用的屬性
* Path的一些方法

刮刮卡的實(shí)現(xiàn)原理圖

這里用到了13中模式中的DstOut這種模式。
對(duì)于這幅圖而言，首先繪制Dst，設(shè)置xfermode，再繪制Src。

刮刮卡的實(shí)現(xiàn)原理步驟

1.繪制顯示中獎(jiǎng)的文本
2.繪制圖層區(qū)/前景圖片
3.設(shè)置xfermode
4.繪制Path
5.清除所有圖層區(qū)方案
6.自定義屬性

代碼講解

第一部分：繪制中獎(jiǎng)信息

 public class GuaGuaLe extends View{
 /**中獎(jiǎng)文本變量*/
 private String mText;//顯示文本
 private Paint mTextPaint;//繪制文本的畫筆
 private Rect mTextBounds;//文本的邊界

 public GuaGuaLe(Context context) {
 this(context, null);
 }

 public GuaGuaLe(Context context, AttributeSet attrs) {
 super(context, attrs);
 initView();
 }

 /**初始化一些實(shí)例變量*/
 private void initView() {
 setTextMessage();//實(shí)例化文本的一些變量

 }

 private void setTextMessage() {
 mText = "謝謝惠顧";
 mTextBounds = new Rect();
 mTextPaint = new Paint();
 mTextPaint.setAntiAlias(true);
 mTextPaint.setColor(Color.DKGRAY);
 mTextPaint.setTextSize(22);
 mTextPaint.getTextBounds(mText,0,mText.length(),mTextBounds);//獲取到繪制文本的長(zhǎng)寬
 }


 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 //繪制文本
 canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);
 }
}

如下圖：

第二部分：繪制圖層區(qū)/前景圖片

 /**畫板變量*/
 private Canvas mCanvas;//緩沖畫板
 private Bitmap mLayerBimtap;//圖層圖片
 private Bitmap mBitmap;//畫板上的畫紙
 private Paint mPaint;//畫筆

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 setCanvasMessage(getMeasuredWidth(),getMeasuredHeight());//實(shí)例化緩存畫板的一些變量
 }

 /***
 * 雙緩沖技術(shù)
 * 1.創(chuàng)建一個(gè)與屏幕繪制區(qū)域一致的Canvas對(duì)象
 * 2.先將圖形繪制到內(nèi)存中
 * 3.再一次性將對(duì)象上的圖形拷貝到屏幕上
 * @param width
 * @param height
 */
 private void setCanvasMessage(int width,int height) {
 mPaint = new Paint();
 mPaint.setAntiAlias(true);
 mPaint.setStyle(Paint.Style.FILL);
 mPaint.setStrokeWidth(3);
 mPaint.setColor(Color.parseColor("#c0c0c0"));
 mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);//創(chuàng)建一個(gè)空白的位圖
 mCanvas = new Canvas(mBitmap);//在此Bitmap上作畫
 //mCanvas.drawColor(Color.parseColor("#c0c0c0"));//繪制背景顏色
 mCanvas.drawRoundRect(new RectF(0, 0, width, height), 20, 20, mPaint);//繪制圓角矩形
 mLayerBimtap = BitmapFactory.decodeResource(getResources(), R.mipmap.fg_guaguaka);
 mCanvas.drawBitmap(mLayerBimtap, null, new RectF(0, 0, width, height), null);//繪制圖層圖片

 @Override
 protected void onDraw(Canvas canvas) {
 //繪制文本
 canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);
 //繪制圖層
 //canvas.drawBitmap(mBitmap,0,0,null);
 //繪制圖層圖片
 canvas.drawBitmap(mBitmap,0,0,null);
 }
 }

如下圖(圖層顏色)：

如下圖(圖層圖片)：

第三部分：設(shè)置xfermode以及繪制Path

 /**路徑變量*/
 private Path mPath;
 private Paint mPathPaint;
 private int mLastX;//記錄上一次X坐標(biāo)
 private int mLastY;//記錄上一次Y坐標(biāo)

 /**初始化一些實(shí)例變量*/
 private void initView() {
 setTextMessage();//實(shí)例化文本的一些變量
 setPathMessage();//實(shí)例化路徑的一些變量
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
 int action = event.getAction();
 //獲取手指在屏幕上的坐標(biāo)
 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;//截取事件向下分發(fā)
 }

 @Override
 protected void onDraw(Canvas canvas) {
 //繪制文本
 canvas.drawText(mText,getWidth()/2 - mTextBounds.width()/2,getHeight()/2 + mTextBounds.height()/2,mTextPaint);
 //繪制路徑
 drawPath();
 //繪制圖片【圖層背景顏色】
 //canvas.drawBitmap(mBitmap,0,0,null);
 //繪制圖片【圖層圖片】
 canvas.drawBitmap(mBitmap, 0, 0, null);

 }

 //返回給系統(tǒng)的canvas是一幅帶有路徑的位圖
 private void drawPath() {
 //這之前是設(shè)置了圖層圖片
 mPathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
 mCanvas.drawPath(mPath,mPathPaint);
 }

如下圖

第三部分：清除所有圖層區(qū)方案

 /**擦除是否完成*/
 private volatile boolean isComplete;

 /**回調(diào)接口*/
 private OnCompleteListener mOnCompleteListener;


 public interface OnCompleteListener{
 void complete();
 }

 //對(duì)外設(shè)置調(diào)用的公開方法
 public void setmOnCompleteListener(OnCompleteListener mOnCompleteListener){
 this.mOnCompleteListener = mOnCompleteListener;
 }

 case MotionEvent.ACTION_UP:
  //開啟一個(gè)線程去計(jì)算擦除的面積
  new Thread(new Runnable() {
   @Override
   public void run() {
   int width = getWidth();
   int height = getHeight();
   int area = 0;//記錄被擦數(shù)的范圍大小
   int percent ;
   for(int i=0;i<width;i++)
    for(int j = 0;j<height;j++){
    if(mBitmap.getPixel(i,j) == 0){
     area ++;
    }
    }

   if(area > 0){
    percent = area *100/(width*height);
    if(percent > 20){
    isComplete = true;
    postInvalidate();//在子線程中刷新，可能比較耗時(shí)操作
    }
   }
   }
  }).start();

 @Override
 protected void onDraw(Canvas canvas) {
 //繪制文本
 canvas.drawText(mText, getWidth() / 2 - mTextBounds.width() / 2, getHeight() / 2 + mTextBounds.height() / 2, mTextPaint);

 if(isComplete){
  if(mOnCompleteListener != null){
  mOnCompleteListener.complete();//接口回調(diào)，在主線程中
  }
 }

 if(!isComplete){
  //繪制路徑
  drawPath();
  //繪制圖片【圖層背景顏色】
  //canvas.drawBitmap(mBitmap,0,0,null);
  //繪制圖片【圖層圖片】
  canvas.drawBitmap(mBitmap, 0, 0, null);
 }
 }


public class MainActivity extends AppCompatActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 GuaGuaLe guaguaLeView = (GuaGuaLe) findViewById(R.id.guaguale);
 //注冊(cè)了一個(gè)觀察者
 guaguaLeView.setmOnCompleteListener(new GuaGuaLe.OnCompleteListener() {
  @Override
  public void complete() {
  Toast.makeText(MainActivity.this, "用戶繪制了大部分", Toast.LENGTH_SHORT).show();
  }
 });
 }
}

如下圖：

第五部分：自定義View的屬性

在values/attrs.xml中定義
 <declare-styleable name="GuaGuaLe">
 <attr name="text" format="string"></attr>
 <attr name="textSize" format="dimension"></attr>
 <attr name="textColor" format="color"></attr>
 </declare-styleable>

在布局文件中定義屬性
 <zlll.bg.com.example.cn.myapplication.view.GuaGuaLe
  android:id="@+id/guaguale"
  android:layout_width="350dp"
  android:layout_height="200dp"
  app:text="$5,000"
  app:textColor="#c02040"
  app:textSize="22sp"
  android:layout_centerInParent="true"/>

在主界面中定義Text文本
public class MainActivity extends AppCompatActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 GuaGuaLe guaguaLeView = (GuaGuaLe) findViewById(R.id.guaguale);
 //注冊(cè)了一個(gè)觀察者
 guaguaLeView.setmOnCompleteListener(new GuaGuaLe.OnCompleteListener() {
  @Override
  public void complete() {
  Toast.makeText(MainActivity.this, "用戶繪制了大部分", Toast.LENGTH_SHORT).show();
  }
 });
 guaguaLeView.setTextByUser("Android 新技能Get");

 }
}

 /**中獎(jiǎng)文本變量*/
 private String mText;//顯示文本
 private Paint mTextPaint;//繪制文本的畫筆
 private Rect mTextBounds;//文本的邊界
 //以下兩個(gè)是新增的
 private int mTextSize;//文本大小
 private int mTextColor;//文本顏色

 //對(duì)外設(shè)置調(diào)用的設(shè)置文本公開方法
 public void setTextByUser(String text){
 mText = text;
 mTextPaint.getTextBounds(mText,0,mText.length(),mTextBounds);//重新計(jì)算文本的范圍
 }

在構(gòu)造函數(shù)中定義
 public GuaGuaLe(Context context, AttributeSet attrs) {
 super(context, attrs);
 //獲取自定義屬性的值
 TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.GuaGuaLe);
 mText = a.getString(R.styleable.GuaGuaLe_text);
 mTextColor = a.getColor(R.styleable.GuaGuaLe_textColor, Color.parseColor("#c0c0c0"));
 //TypedValue.applyDimension內(nèi)部就是將sp,dp轉(zhuǎn)化為px
 mTextSize = a.getDimensionPixelSize(R.styleable.GuaGuaLe_textSize, (int) TypedValue.applyDimension
  (TypedValue.COMPLEX_UNIT_SP,22,getResources().getDisplayMetrics()));
 a.recycle();
 initView();
 }

如下圖：

下圖是用戶自行設(shè)置的文本

經(jīng)過上面幾個(gè)步驟，就可以完成呱呱卡的實(shí)現(xiàn)效果了。

總結(jié)一下：
（1）圓形圓角圖片的原理
1.繪制圖片
2.paint.setXfermode(DstIn); – 取交集以先繪制的圖層為主 Dst是背景圖片
3.繪制圓形圖片

1.繪制圓形圖片
2.paint.setXfermode(SrcIn); – 取交集以后繪制的圖層為主 Src是結(jié)構(gòu)圖片
3.繪制圖片

（2）雙緩沖技術(shù)繪圖【在內(nèi)存中繪制，再一次性位圖拷貝到屏幕上】
1.在內(nèi)存中創(chuàng)建與畫布一致寬高的canvas
2.在緩沖區(qū)畫圖
3.將緩沖區(qū)位圖拷貝到當(dāng)前畫布上
4.釋放緩沖區(qū)
自己的理解是：在內(nèi)存中定義一個(gè)畫板，然后在上面繪圖，將繪圖結(jié)果放在一個(gè)Bitmap中，最后讓系統(tǒng)的Canvas繪制這個(gè)Bitmap

（3）Bimtap獲取像素?cái)?shù)據(jù)（方式一）
bm.getPixels(x,y) 直接獲取x,y坐標(biāo)處的像素點(diǎn)數(shù)據(jù)

（4）獲取繪制文本的長(zhǎng)寬的（方式一）
1.計(jì)算文字所在的矩形，獲取寬高[Rect]
Rect rect = new Rect();
paint.getTextBounds(str,0,str,length,rect);
int w = rect.width;
int h = rect.height;

（5）自定義View
1.在values目錄下新建attrs.xml文件
2.設(shè)置屬性有text,textColor,textSize
3.在布局文件中引用
4.在構(gòu)造函數(shù)中獲取自定義屬性
5.對(duì)外提供方法，讓用戶動(dòng)態(tài)的設(shè)置中獎(jiǎng)信息

（6）獲取屏幕密度（方式一）
DisplayMetrics dm = getResource().getDisplayMetrics();
float density = dm.density; – 像素比例（0.75/1.0/1.5/2.0/3.0/4.0）顯示的就是px/dp的比例
int densityDpi = dm.densityDpi; – 每寸像素（120/160/240/320/480/640）
int screenWidth = dm.widthPixels; – 寬像素
int screenHeight = dm.heightPixels; – 高像素

（7）Canva的一些方法
drawColor 繪制背景顏色
drawText 繪制文本
drawBitmap 繪制圖片
【drawBitmap(bitmap,x,y,paint) – 將圖畫到指定坐標(biāo)】
【drawBitma(bitmap,srcRect,dstRect,paint) – 將圖指定區(qū)域其參數(shù)是四個(gè)頂點(diǎn)的坐標(biāo)，左上右下】
drawRoundRect 繪制圓角矩形
【drawRoundRect(rectf,rx,ry,paint) – rx(x方向上的圓角半徑) ry(y方向上的圓角半徑)】

（8）Paint的一些常用屬性
setColor/setARGB 設(shè)置繪制顏色
setAlpha 設(shè)置繪制透明度
setAntiAlias 設(shè)置平滑
setDither 設(shè)置圖像抖動(dòng)
setStyle 設(shè)置畫筆的樣式
setStrokeWidth 設(shè)置畫筆的寬度
setXfermode 設(shè)置圖形重疊時(shí)處理方式
setStrokeJoin 設(shè)置圖形結(jié)合方式
setTextSize 設(shè)置文本的大小、

（9）Path（將View上的N個(gè)點(diǎn)連成一條“路徑”，然后調(diào)用Canvas的drawPath繪制圖形）的一些方法
reset 清除path
moveTo（x,y）將起始點(diǎn)移至x,y坐標(biāo)點(diǎn)
lineTo 繪制直線
quadTo 繪制曲線

以上就是本文的全部?jī)?nèi)容，你中獎(jiǎng)了嗎？希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: