繪圖類實(shí)戰(zhàn)示例
本節(jié)引言:
前兩節(jié)我們學(xué)了Bitmap和一些基本的繪圖API的屬性以及常用的方法,但心里總覺得有點(diǎn) 不踏實(shí),總得寫點(diǎn)什么加深下映像是吧,嗯,本節(jié)我們就來(lái)寫兩個(gè)簡(jiǎn)單的例子:
- 1.簡(jiǎn)單畫圖板的實(shí)現(xiàn)
- 2.幫美女擦衣服的簡(jiǎn)單實(shí)現(xiàn)
嘿嘿,第二個(gè)例子是小豬剛學(xué)安卓寫的一個(gè)小Demo~嘿嘿~ 開始本節(jié)內(nèi)容~
1.實(shí)戰(zhàn)示例1:簡(jiǎn)單畫圖板的實(shí)現(xiàn):
這個(gè)相信大家都不陌生,很多手機(jī)都會(huì)自帶一個(gè)給用戶涂鴉的畫圖板,這里我們就來(lái)寫個(gè)簡(jiǎn)單的 例子,首先我們分析下,實(shí)現(xiàn)這個(gè)東東的一些邏輯:
Q1:這個(gè)畫板放在哪里?
答:View里,我們自定義一個(gè)View,在onDraw()里完成繪制,另外View還有個(gè)onTouchEvent的方法, 我們可以在獲取用戶的手勢(shì)操作!
Q2.需要準(zhǔn)備些什么?
答:一只畫筆(Paint),一塊畫布(Canvas),一個(gè)路徑(Path)記錄用戶繪制路線; 另外劃線的時(shí)候,每次都是從上次拖動(dòng)時(shí)間的發(fā)生點(diǎn)到本次拖動(dòng)時(shí)間的發(fā)生點(diǎn)!那么之前繪制的 就會(huì)丟失,為了保存之前繪制的內(nèi)容,我們可以引入所謂的"雙緩沖"技術(shù): 其實(shí)就是每次不是直接繪制到Canvas上,而是先繪制到Bitmap上,等Bitmap上的繪制完了, 再一次性地繪制到View上而已!
Q3.具體的實(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方法將bitmap的東東畫到Canvas上!
好了,邏輯知道了,下面就上代碼了:
MyView.java:
/** * Created by Jay on 2015/10/15 0015. */ public class MyView extends View{ private Paint mPaint; //繪制線條的Path private Path mPath; //記錄用戶繪制的Path private Canvas mCanvas; //內(nèi)存中創(chuàng)建的Canvas private Bitmap mBitmap; //緩存繪制的內(nèi)容 private int mLastX; private int mLastY; public MyView(Context context) { super(context); init(); } public MyView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init(){ mPath = new Path(); mPaint = new Paint(); //初始化畫筆 mPaint.setColor(Color.GREEN); mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND); //結(jié)合處為圓角 mPaint.setStrokeCap(Paint.Cap.ROUND); // 設(shè)置轉(zhuǎn)彎處為圓角 mPaint.setStrokeWidth(20); // 設(shè)置畫筆寬度 } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = getMeasuredWidth(); int height = getMeasuredHeight(); // 初始化bitmap,Canvas mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBitmap); } //重寫該方法,在這里繪圖 @Override protected void onDraw(Canvas canvas) { drawPath(); canvas.drawBitmap(mBitmap, 0, 0, null); } //繪制線條 private void drawPath(){ mCanvas.drawPath(mPath, mPaint); } @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; } invalidate(); return true; } }
運(yùn)行效果圖:
你可以根據(jù)自己的需求進(jìn)行擴(kuò)展,比如加上修改畫筆大小,修改畫筆顏色,保存自己畫的圖等! 發(fā)散思維,自己動(dòng)手~
2.實(shí)戰(zhàn)示例2:擦掉美女衣服的實(shí)現(xiàn)
核心思路是: 利用幀布局,前后兩個(gè)ImageView,前面的顯示未擦掉衣服的情況,后面的顯示擦掉衣服后的情況!
為兩個(gè)ImageView設(shè)置美女圖片后,接著為前面的ImageView設(shè)置OnTouchListener!在這里對(duì)手指 觸碰點(diǎn)附近的20*20個(gè)像素點(diǎn),設(shè)置為透明!
運(yùn)行效果圖:
代碼實(shí)現(xiàn):
Step 1:第一個(gè)選妹子的Activity相關(guān)的編寫,首先是界面,一個(gè)ImageView,Button和Gallery!
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/img_choose" android:layout_width="320dp" android:layout_height="320dp" /> <Button android:id="@+id/btn_choose" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="脫光她!" /> <Gallery android:id="@+id/gay_choose" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:spacing="1pt" android:unselectedAlpha="0.6" /> </LinearLayout>
接著是我們Gallery的Adapter類,這里我們重寫下BaseAdapter,而里面就顯示一個(gè)圖片比較簡(jiǎn)單, 就不另外寫一個(gè)布局了!
MeiziAdapter.java:
/** * Created by Jay on 2015/10/16 0016. */ public class MeiziAdapter extends BaseAdapter{ private Context mContext; private int[] mData; public MeiziAdapter() { } public MeiziAdapter(Context mContext,int[] mData) { this.mContext = mContext; this.mData = mData; } @Override public int getCount() { return mData.length; } @Override public Object getItem(int position) { return mData[position]; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ImageView imgMezi = new ImageView(mContext); imgMezi.setImageResource(mData[position]); //創(chuàng)建一個(gè)ImageView imgMezi.setScaleType(ImageView.ScaleType.FIT_XY); //設(shè)置imgView的縮放類型 imgMezi.setLayoutParams(new Gallery.LayoutParams(250, 250)); //為imgView設(shè)置布局參數(shù) TypedArray typedArray = mContext.obtainStyledAttributes(R.styleable.Gallery); imgMezi.setBackgroundResource(typedArray.getResourceId(R.styleable.Gallery_android_galleryItemBackground, 0)); return imgMezi; } }
最后到我們的Activity,也很簡(jiǎn)單,無(wú)非是為gallery設(shè)置onSelected事件,點(diǎn)擊按鈕后把,當(dāng)前選中的 Position傳遞給下一個(gè)頁(yè)面!
MainActivity.java:
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener, View.OnClickListener { private Context mContext; private ImageView img_choose; private Button btn_choose; private Gallery gay_choose; private int index = 0; private MeiziAdapter mAdapter = null; private int[] imageIds = new int[] { R.mipmap.pre1, 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.pre10, R.mipmap.pre11, R.mipmap.pre12, R.mipmap.pre13, R.mipmap.pre14, R.mipmap.pre15, R.mipmap.pre16, R.mipmap.pre17, R.mipmap.pre18, R.mipmap.pre19, R.mipmap.pre20, R.mipmap.pre21 }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mContext = MainActivity.this; bindViews(); } private void bindViews() { img_choose = (ImageView) findViewById(R.id.img_choose); btn_choose = (Button) findViewById(R.id.btn_choose); gay_choose = (Gallery) findViewById(R.id.gay_choose); mAdapter = new MeiziAdapter(mContext, imageIds); gay_choose.setAdapter(mAdapter); gay_choose.setOnItemSelectedListener(this); btn_choose.setOnClickListener(this); } @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { img_choose.setImageResource(imageIds[position]); index = position; } @Override public void onNothingSelected(AdapterView<?> parent) { } @Override public void onClick(View v) { Intent it = new Intent(mContext,CaClothes.class); Bundle bundle = new Bundle(); bundle.putCharSequence("num", Integer.toString(index)); it.putExtras(bundle); startActivity(it); } }
接著是我們擦掉妹子衣服的頁(yè)面了,布局比較簡(jiǎn)單,F(xiàn)rameLayout + 前后兩個(gè)ImageView:
activity_caclothes.xml:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/img_after" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageView android:id="@+id/img_before" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </FrameLayout>
接著到就到Java部分的代碼了:
CaClothes.java:
/** * Created by Jay on 2015/10/16 0016. */ public class CaClothes extends AppCompatActivity implements View.OnTouchListener { private ImageView img_after; private ImageView img_before; private Bitmap alterBitmap; private Canvas canvas; private Paint paint; private Bitmap after; private Bitmap before; private int position; int[] imageIds1 = new int[] { R.mipmap.pre1, 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.pre10, R.mipmap.pre11, R.mipmap.pre12, R.mipmap.pre13, R.mipmap.pre14, R.mipmap.pre15, R.mipmap.pre16, R.mipmap.pre17, R.mipmap.pre18, R.mipmap.pre19, R.mipmap.pre20, R.mipmap.pre21 }; int[] imageIds2 = new int[] { R.mipmap.after1, R.mipmap.after2, R.mipmap.after3, R.mipmap.after4, R.mipmap.after5, R.mipmap.after6, R.mipmap.after7, R.mipmap.after8, R.mipmap.after9, R.mipmap.after10, R.mipmap.after11, R.mipmap.after12, R.mipmap.after13, R.mipmap.after14, R.mipmap.after15, R.mipmap.after16, R.mipmap.after17, R.mipmap.after18, R.mipmap.after19, R.mipmap.after20, R.mipmap.after21 }; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_caclothes); Bundle bd = getIntent().getExtras(); position = Integer.parseInt(bd.getString("num")); bindViews(); } private void bindViews() { img_after = (ImageView) findViewById(R.id.img_after); img_before = (ImageView) findViewById(R.id.img_before); BitmapFactory.Options opts = new BitmapFactory.Options(); opts.inSampleSize = 1; after = BitmapFactory.decodeResource(getResources(), imageIds2[position], opts); before = BitmapFactory.decodeResource(getResources(), imageIds1[position], opts); //定義出來(lái)的是只讀圖片 alterBitmap = Bitmap.createBitmap(before.getWidth(), before.getHeight(), Bitmap.Config.ARGB_4444); canvas = new Canvas(alterBitmap); paint = new Paint(); paint.setStrokeCap(Paint.Cap.ROUND); paint.setStrokeJoin(Paint.Join.ROUND); paint.setStrokeWidth(5); paint.setColor(Color.BLACK); paint.setAntiAlias(true); canvas.drawBitmap(before, new Matrix(), paint); img_after.setImageBitmap(after); img_before.setImageBitmap(before); img_before.setOnTouchListener(this); } @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: break; case MotionEvent.ACTION_MOVE: int newX = (int) event.getX(); int newY = (int) event.getY(); //setPixel方法是將某一個(gè)像素點(diǎn)設(shè)置成一個(gè)顏色,而這里我們把他設(shè)置成透明 //另外通過嵌套for循環(huán)將手指觸摸區(qū)域的20*20個(gè)像素點(diǎn)設(shè)置為透明 for (int i = -20; i < 20; i++) { for (int j = -20; j < 20; j++) { if (i + newX >= 0 && j + newY >= 0 && i + newX < before.getWidth() && j + newY < before.getHeight()) alterBitmap.setPixel(i + newX, j + newY, Color.TRANSPARENT); } } img_before.setImageBitmap(alterBitmap); break; } return true; } }
代碼也不算苦澀難懂,還是比較簡(jiǎn)單的哈,嗯,效果圖看看就好,別做那么多右手螺旋定則哈....
3.代碼示例下載:
DrawDemo1.zip 項(xiàng)目比較大,20多M,圖片資源比較多,你懂的~
本節(jié)小結(jié):
好的,本節(jié)寫了關(guān)于繪圖的兩個(gè)小例子,還是蠻有趣的,相信你發(fā)下了,擦美女衣服那里, 消除的時(shí)候是方塊的,不那么完美是吧,沒事,下節(jié)我們學(xué)多個(gè)PorterDuff這個(gè)東西,我們 再來(lái)寫多個(gè)例子,相比起這個(gè)代碼就簡(jiǎn)單很多了,另外,時(shí)間關(guān)系,代碼并沒有去優(yōu)化 或者整理,可以根據(jù)自己需求進(jìn)行修改~好的,就說(shuō)這么多,祝大家周末愉快~