Android刮刮卡實(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)用的公開(kāi)方法 public void setmOnCompleteListener(OnCompleteListener mOnCompleteListener){ this.mOnCompleteListener = mOnCompleteListener; } case MotionEvent.ACTION_UP: //開(kāi)啟一個(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è)置文本公開(kāi)方法 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)過(guò)上面幾個(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í)有所幫助。
相關(guān)文章
Android應(yīng)用開(kāi)發(fā)SharedPreferences存儲(chǔ)數(shù)據(jù)的使用方法
SharedPreferences是Android中最容易理解的數(shù)據(jù)存儲(chǔ)技術(shù),實(shí)際上SharedPreferences處理的就是一個(gè)key-value(鍵值對(duì))SharedPreferences常用來(lái)存儲(chǔ)一些輕量級(jí)的數(shù)據(jù)2012-11-11Android實(shí)現(xiàn)簡(jiǎn)單實(shí)用的垂直進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單實(shí)用的垂直進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Android自定義View繪制四位數(shù)隨機(jī)碼
這篇文章主要介紹了Android自定義View繪制四位數(shù)隨機(jī)碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10Android onLoadFinished與onLoaderReset回調(diào)詳解及實(shí)例
這篇文章主要介紹了Android onLoadFinished與onLoaderReset回調(diào)詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-03-03Android SharePreferences與數(shù)據(jù)庫(kù)SQLite存儲(chǔ)實(shí)現(xiàn)方法介紹
這篇文章主要介紹了Android SharePreferences與數(shù)據(jù)庫(kù)SQLite用于存儲(chǔ)的具體實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09Android中WebView無(wú)法后退和js注入漏洞的解決方案
這篇文章主要介紹了Android中WebView無(wú)法后退和js注入漏洞解決方案,其中js注入主要針對(duì)安卓4.2及以下版本中WebView的漏洞,需要的朋友可以參考下2016-02-02Android中Button實(shí)現(xiàn)點(diǎn)擊換圖案及顏色
大家好,本篇文章主要講的是Android中Button實(shí)現(xiàn)點(diǎn)擊換圖案及顏色,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下2022-01-01