android基礎(chǔ)入門教程8.3.2繪圖類實(shí)戰(zhàn)示例

1、title: Android基礎(chǔ)入門categories: Android8.3.2 繪圖類實(shí)戰(zhàn)示例基礎(chǔ)入門，Android基礎(chǔ)入門8.3.2 繪圖類實(shí)戰(zhàn)示例本節(jié)引言：1.實(shí)戰(zhàn)示例1：簡(jiǎn)單畫圖板的實(shí)現(xiàn)：這個(gè)相信大家都不陌生，很多都會(huì)自帶一個(gè)給用戶涂鴉的畫圖板，這里就來寫個(gè)簡(jiǎn)單的例子，首先分析下，實(shí)現(xiàn)這個(gè)東東的一些邏輯：Q1：這個(gè)畫板放在哪里？答：View里，自定義一個(gè)View，在onDraw()里完成繪制，另外View還有個(gè) onTouchEvent的方法，可以在獲取用戶勢(shì)操作！ q2.需要準(zhǔn)備些什么？答：一只畫筆(Pa)，一塊畫布(Canvas)，一個(gè)路徑(Path)用戶繪制路線；另外劃線的

2、時(shí)候，每次都是從上次拖動(dòng)時(shí)間的發(fā)生點(diǎn)到本次拖動(dòng)時(shí)間的發(fā)生點(diǎn)！那么之前繪制的前兩節(jié)學(xué)了Bitmap和一些基本的繪圖API的屬性以及常用的方法，但心里總覺得有點(diǎn)不踏實(shí)，總得寫點(diǎn)什么加深下映像是吧，嗯，本節(jié)就來寫兩個(gè)簡(jiǎn)單的例子： 1.簡(jiǎn)單畫圖板的實(shí)現(xiàn)2.幫擦衣服的簡(jiǎn)單實(shí)現(xiàn)嘿嘿，第二個(gè)例子是小豬剛學(xué)安卓寫的一個(gè)小Demo嘿嘿開始本節(jié)內(nèi)容好了，邏輯知道了，下面就上代碼了：MyView.java：/* Created by Jay on 20 5/ 0/ 5 00 5.*/public class MyView extends View.private PamPa; /繪制線條的Pathprivate P

3、ath mPath; private Canvas mCanvas; private Bitmap mBitmap;/用戶繪制的Path/內(nèi)存中創(chuàng)建的Canvas/緩存繪制的內(nèi)容private privatemLastX; mLastY;.0.2.3.4.public MyView(Context context) super(context);init();public MyView(Context context, AttributeSe super(context, attrs);init();trs) public MyView(Context context, AttributeSe

4、trs,defStyleAttr) 5.6.super(context, attrs, defStyleAttr); init();就會(huì)丟失，為了保存之前繪制的內(nèi)容，可以引入所謂的“雙緩沖”技術(shù)：其實(shí)就是每次不是直接繪制到Canvas上，而是先繪制到Bitmap上，等Bitmap上的繪制完了，再地繪制到View上而已！ 3.具體的實(shí)現(xiàn)流程？答：初始化畫筆，設(shè)置顏色等等一些參數(shù)；在View的onMeasure()方法中創(chuàng)建一個(gè)View大小的Bitmap，同時(shí)創(chuàng)建一個(gè)Canvas；onTouchEvent中獲得X,Y坐標(biāo)，做繪制連線，最后invalidate()重繪，即調(diào)用onDraw方法將bit

5、map的東東畫到Canvas上！7.8.9.0.2.3.4.5.6.7.8.9.0.2.private void init()mPath mPa mPa mPa mPa mPa mPa mPamPa= ne= neth();();/初始化畫筆.setColor(ColREEN);.setAntiAlias(true);.setDither(true);.setStyle(Pa.Style.STROKE);.setStrokeJoin(Pa.setStrokeCap(Pa.Join.ROUND); /結(jié)合處為圓角.Cap.ROUND); / 設(shè)置轉(zhuǎn)彎處為圓角.setStrokeWidth(20)

6、;/ 設(shè)置畫筆寬度Overrideprotectedvoid onMeasure(widthMeasureSpec,heightMeasureSpec) super.onMeasure(widthMeasureSpec, heightMeasureSpec); width = getMeasuredWidth();height = getMeasuredHeight();/ 初始化bitmap,CanvasmBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);mCanvas = new Canvas(mBit

7、map);3.4.5.6.7.8.9.0.2.3.4.5.6.7.8.9.0.2.3.4.5.6.7.8.9./重寫該方法，在這里繪圖 Overrideprotected void onDraw(Canvas canvas) drath();canvas.drawBitmap(mBitmap, 0, 0, null);/繪制線條private void drath()mCanvas.drath(mPath, mPa);OverridepubliconTouchEvent(MotionEvent event) action x = (y = (= event.getAction();) even

8、t.getX();) event.getY();0.2.3.4.5.6.7.8.9.0.2.3.4.5.6.7.8.9.0.switch (action)case MotionEvent.ACT ON_DOWN: mLastX = x;mLastY = y; mPath.moveTo(mLastX, mLastY); break;caseMotionEvent.ACT ON_MOVE:dx = Ma dy = Maif (dx 3bs(xmLastX); bs(ymLastY);dy 3)mPath.lineTo(x, y); mLastX = x;mLastY = y; break;inva

9、lidate(); return true;運(yùn)行效果圖：你可以根據(jù)自己的需求進(jìn)行擴(kuò)展，比如加上修改畫筆大小，修改畫筆顏色，保存自己畫的圖等！發(fā)散思維，自己動(dòng)手2.實(shí)戰(zhàn)示例2：擦掉衣服的實(shí)現(xiàn)運(yùn)行效果圖：代碼實(shí)現(xiàn)：思路是：利用幀布局，前后兩個(gè)ImageView，前面的顯示未擦掉衣服的情況，后面的顯示擦掉衣服后的情況！為兩個(gè)ImageView設(shè)置后，接著為前面的ImageView設(shè)置OnTouchListener！在這里對(duì)手指觸碰點(diǎn)附近的20*20個(gè)像素點(diǎn)，設(shè)置為透明！Step 1：第一個(gè)選妹子的Activity相關(guān)的編寫，首先是界面，一個(gè)ImageView，Button和 Gallery！acti

10、vity_main.xml：.0.2.3.4.5.6.接著是簡(jiǎn)單，Gallery的Adapter類，這里重寫下BaseAdapter，而里面就顯示一個(gè)比較就不另外寫一個(gè)布局了！MeiziAdapter.java:/* Created by Jay on 20 5/ 0/ 6 00 6.*/public class MeiziAdapter extends BaseAdapterprivate Context mContext;private mData;public MeiziAdapter() .0.2.3.4.5.6.7.8.9.0.2.3.public MeiziAdapter(Cont

11、ext mContext,this.mContext = mContext;mData)thita = mData;Override publicreturngetCount() mData.length;Overridepublic Object get tem( return mDataition;ition) Override public longreturnget tem d(ition;ition) Overridepublic ViewgetView(ition, ViewconvertView,ViewGroupparent)4.5.mageView imgMezi = new

12、 mageView(mContext);imgMezi.set mageResource(mDatamageViewition);/創(chuàng)建一個(gè)6.imgMezi.setScaleType( mageView.ScaleType. T_XY);imgView的縮放類型/設(shè)置7.imgMezi.setLayoutParams(new Gallery.LayoutParams(250, 250);/為imgView設(shè)置布局參數(shù)TypedArray typedArray = mContext.obtainStyledAttributes(R.style able.Gallery);imgMezi.set

13、BackgroundResource(typedArray.getResource d(R.stylea ble.Gallery_android_gallery temBackground, 0);return imgMezi;8.9.0.2.最后到的Activity，也很簡(jiǎn)單，無非是為gallery設(shè)置onSelected事件，點(diǎn)擊按鈕后把，當(dāng)前選中的ition傳遞給下一個(gè)頁面！MainActivity.java：public class MainActivity extends AdapterView.On temSelectedListener,View.OnClickListener

14、ptivity implements.private Context mContext; private mageView img_choose; private Button btn_choose; private Gallery gay_choose;privateindex = 0;private MeiziAdapter mAdapter = null;private image ds = new.R.mipmap.pre ,R.mipmap.pre2, R.mipmap.pre3,R.mipmap.pre4,.R.mipmap.pre5, R.mipmap.pre6, R.mipma

15、p.pre7,R.mipmap.pre8,.R.mipmap.pre9, R.mipmap.pre 0, R.mipmap.pre ,R.mipmap.pre 2,.R.mipmap.pre 3, R.mipmap.pre 4, R.mipmap.pre 5,R.mipmap.pre 6,.R.mipmap.pre 7, R.mipmap.pre 8, R.mipmap.pre 9,R.mipmap.pre20,.0.2.3.4.5.6.7.8.9.R.mipmap.pre2;Override protected voidonCreate(Bundle saved nstane) super.

16、onCreate(saved nstane);setContentView(R.layout.activity_main); mContext = MainActivity.this; bindViews();private void bindViews() img_choose = ( mageView) findViewBy d(R.id.img_choose);0.2.3.4.5.6.7.8.9.0.2.3.btn_choosegay_choose= (Button) findViewBy d(R.id.btn_choose);= (Gallery) findViewBy d(R.id.

17、gay_choose);mAdapter =new MeiziAdapter(mContext, image ds);gay_choose.setAdapter(mAdapter);gay_choose.setOn temSelectedListener(this); btn_choose.setOnClickListener(this);Overridepublic void on temSelectepterView parent, View view,position,long id) img_choose.set mageResource(image ds4.5.6.7.8.9.0.2

18、.3.4.5.6.7.8.9.0.ition);index =ition;Override public voidonNothingSelectepterView parent) Overridepublic voidonClick(View v) ntent it = new ntent(mContext,CaClothes.class);Bundbundle.pundle = new Bundle();harSequence(num, nteger.toString(index);it.putExtras(bundle);startActivity(it);接著是擦掉妹子衣服的頁面了，布局

19、比較簡(jiǎn)單，F(xiàn)rameLayout + 前后兩個(gè)ImageView：activity_caclothes.xml：./apk/res/android.接著到就到Java部分的代碼了：CaClothes.java：/* Created by Jay on 20 5/ 0/ 6 00 6.*/.public class CaClothes extends View.OnTouchListener ptivity implements.private mageView img_after; private mageView img_before; private Bitmap alterBitmap;

20、 private Canvas canvas;private Papa ;private Bitmap after; private Bitmap before;.privateition; image ds= newR.mipmap.pre , R.mipmap.pre2, R.mipmap.pre3,R.mipmap.pre4,.R.mipmap.pre5, R.mipmap.pre6, R.mipmap.pre7,R.mipmap.pre8,.R.mipmap.pre9, R.mipmap.pre 0, R.mipmap.pre ,R.mipmap.pre 2,0.R.mipmap.pr

21、e 3, R.mipmap.pre 4, R.mipmap.pre 5,R.mipmap.pre 6,.R.mipmap.pre 7, R.mipmap.pre 8, R.mipmap.pre 9,R.mipmap.pre20,2.3.4.5.6.7.8.R.mipmap.pre2; image ds2 = newR.mipmap.after , R.mipmap.after2, R.mipmap.after3, R.mipmap.after4,9.R.mipmap.after5, R.mipmap.after6, R.mipmap.after7, R.mipmap.after8,0.R.mi

22、pmap.after9, R.mipmap.after 0, R.mipmap.after, R.mipmap.after 2,.R.mipmap.after 3, R.mipmap.after 4,R.mipmap.after 5, R.mipmap.after 6,R.mipmap.after 7, R.mipmap.after 8,R.mipmap.after 9, R.mipmap.after20,R.mipmap.after2;2.3.4.5.6.7.8.9.0.2.3.4.5.6.7.8.9.0.2.3.4.5.Overridepublic void onCreate(Bundle

23、 saved nstane) super.onCreate(saved nstane);setContentView(R.layout.activity_caclothes);Bundd = geent().getExtras();ition = nteg bindViews();arse nt(bd.getString(num);private void bindViews() img_after = ( mageView) findViewBy d(R.id.img_after); img_before = ( mageView) findViewBy d(R.id.img_before)

24、;Bitmap actory.Options opts = new Bitmap actory.Options();opts.inSleSize = ;after = Bitmap actory.decodeResource(getResour(), image ds2 ition, opts);6.before = Bitmap actory.decodeResource(getResour ition, opts);/定義出來的是只讀(), image ds7.8.9.alterBitmap = Bitmap.createBitmap(before.getWidth(), before.g

25、et Height(), Bitmap.Config.ARGB_4444);canvas = new Canvas(alterBitmap);0.2.3.4.5.6.7.8.9.0.2.3.4.5.6.7.8.9.0.pa pa pa pa papa= ne();.setStrokeCap(Pa.Cap.ROUND);.setStrokeJoin(Pa.Join.ROUND);.setStrokeWidth(5);.setColor(Color.BLACK);.setAntiAlias(true);canvas.drawBitmap(before, new Matrix(), pa img_after.set mageBitmap(after); img_before.