8.3.2 绘图类实战示例

本节引言：前两节我们学了Bitmap和一些基本的绘图API的属性以及常用的方法，但心里总觉得有点不踏实，总得写点什么加深下映像是吧，嗯，本节我们就来写两个简单的例子：1.简单画图板的实现2.帮美女擦衣服的简单实现嘿嘿，第二个例子是小猪刚学安卓写的一个小Demo~嘿嘿~开始本节内容~1.实战示例1：简单画图板的实现：这个相信大家都不陌生，很多手机都会自带一个给用户涂鸦的画图板，这里我们就来写个简单的例子，首先我们分析下，实现这个东东的一些逻辑：Q1：这个画板放在哪里？答：View里，我们自定义一个View，在onDraw()里完成绘制，另外View还有个onTouchEvent的方法，我们可以在获取用户的手势操作！Q2.需要准备些什么？答：一只画笔(Paint)，一块画布(Canvas)，一个路径(Path)记录用户绘制路线；另外划线的时候，每次都是从上次拖动时间的发生点到本次拖动时间的发生点！那么之前绘制的就会丢失，为了保存之前绘制的内容，我们可以引入所谓的"双缓冲"技术：其实就是每次不是直接绘制到Canvas上，而是先绘制到Bitmap上，等Bitmap上的绘制完了，再一次性地绘制到View上而已！Q3.具体的实现流程？答：初始化画笔，设置颜色等等一些参数；在View的onMeasure()方法中创建一个View大小的Bitmap，同时创建一个Canvas；onTouchEvent中获得X,Y坐标，做绘制连线，最后invalidate()重绘，即调用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; //内存中创建的Canvas private Bitmap mBitmap; //缓存绘制的内容 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); //结合处为圆角 mPaint.setStrokeCap(Paint.Cap.ROUND); // 设置转弯处为圆角 mPaint.setStrokeWidth(20); // 设置画笔宽度 } @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; }}运行效果图：你可以根据自己的需求进行扩展，比如加上修改画笔大小，修改画笔颜色，保存自己画的图等！发散思维，自己动手~2.实战示例2：擦掉美女衣服的实现核心思路是：利用帧布局，前后两个ImageView，前面的显示未擦掉衣服的情况，后面的显示擦掉衣服后的情况！为两个ImageView设置美女图片后，接着为前面的ImageView设置OnTouchListener！在这里对手指触碰点附近的20*20个像素点，设置为透明！运行效果图：代码实现：Step 1：第一个选妹子的Activity相关的编写，首先是界面，一个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，而里面就显示一个图片比较简单，就不另外写一个布局了！MeiziAdapter.java:/** * Created by Jay on 2015/10/16 0016