转载请注明出处http://blog.csdn.net/u014163726/article/details/44994197
这么长时间没写博客感觉手都要生了啊，最近因为工作的关系来到了上海，目前还算稳定，所以抓紧时间写篇博客压压惊。
标题早已经看穿一切，这次我们来模仿一下qq上传头像的功能，先上一个未完成版的效果图,银魂第四季重开放上一张萌萌哒的图片。
这还是要用到我们自定义View的知识，首先从相册中获取图片的部分我就不详细介绍了。
/** * 获得图片 */ protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == CHOOSE_BIG_PICTURE) { photoBitmap = null; photoViewBitmap = null; try { Uri originalUri = data.getData(); int angle = getExifOrientation(getRealPathFromURI(originalUri)); if (angle != 0) { // 如果照片出现了 旋转 那么 就更改旋转度数 Matrix matrix = new Matrix(); matrix.postRotate(angle); photoBitmap = getBitmapFromUri(photoBitmap, originalUri); photoViewBitmap = Bitmap.createBitmap(photoBitmap, 0, 0, photoBitmap.getWidth(), photoBitmap.getHeight(), matrix, true); clipView.setBitmap(photoViewBitmap); } else { clipView.setBitmap(getBitmapFromUri(photoBitmap, originalUri)); } photoBitmap.recycle(); photoViewBitmap.recycle(); } catch (Exception e) { System.out.println(e.getMessage()); } } }我当时用的是三星的Note3测试发现获取的图片会发生旋转十分的坑爹。。所以我们还需要根据uri拿到路径然后再判断图片是否旋转。
/** * 根据Uri获得bitmap * * @param bitmap * @param uri * @return */ private Bitmap getBitmapFromUri(Bitmap bitmap, Uri uri) { try { bitmap = MediaStore.Images.Media.getBitmap( this.getContentResolver(), uri); return bitmap; } catch (Exception e) { Log.d("TAG", e.getLocalizedMessage()); return null; } } /** * 获得系统相册图片 */ private void getAlbum() { Intent intent = new Intent(Intent.ACTION_PICK); intent.setType("image/*");// 相片类型 startActivityForResult(intent, CHOOSE_BIG_PICTURE); } /** * 旋转图片 * * @param filepath * @return */ private int getExifOrientation(String filepath) { int degree = 0; ExifInterface exif = null; try { exif = new ExifInterface(filepath); } catch (IOException ex) { } if (exif != null) { int orientation = exif.getAttributeInt( ExifInterface.TAG_ORIENTATION, -1); if (orientation != -1) { switch (orientation) { case ExifInterface.ORIENTATION_ROTATE_90: degree = 90; break; case ExifInterface.ORIENTATION_ROTATE_180: degree = 180; break; case ExifInterface.ORIENTATION_ROTATE_270: degree = 270; break; } } } return degree; } /** * 根据Uri拿到路径 * * @param contentUri * @return */ public String getRealPathFromURI(Uri contentUri) { String res = null; String[] proj = { MediaStore.Images.Media.DATA }; Cursor cursor = getContentResolver().query(contentUri, proj, null, null, null); if (cursor.moveToFirst()) { int column_index = cursor .getColumnIndexOrThrow(MediaStore.Images.Media.DATA); res = cursor.getString(column_index); } cursor.close(); return res; }拿到图片之后就进入我们的自定义view环节啦。
public class ClipView extends View { /** * 画笔 */ private Paint paint; /** * 图片 */ private Bitmap mBitmap; /** * 画布 */ private Canvas mCanvas; /** * 蒙版 */ private Bitmap bitmap; /** * 起点坐标 */ private int startX, startY; /** * 移动距离 */ private int distanceX, distanceY; /** * 图片坐标 */ private int widthX, heightY; int x = 0, y = 0; public ClipView(Context context) { super(context); init(); // TODO Auto-generated constructor stub } public ClipView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public ClipView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); }我们默认把传进来的图片缩放至600,800这样不会让图片过大也不会过小。/** * 缩放图片 * * @param bgimage * @param newWidth * @param newHeight * @return */ private Bitmap zoomImage(Bitmap bgimage, double newWidth, double newHeight) { // 获取这个图片的宽和高 float width = bgimage.getWidth(); float height = bgimage.getHeight(); // 创建操作图片用的matrix对象 Matrix matrix = new Matrix(); // 计算宽高缩放率 float scaleWidth = ((float) newWidth) / width; float scaleHeight = ((float) newHeight) / height; // 缩放图片动作 matrix.postScale(scaleWidth, scaleHeight); Bitmap bitmap = Bitmap.createBitmap(bgimage, 0, 0, (int) width, (int) height, matrix, true); return bitmap; } /** * 拿到图片首先进行缩放 * * @param bitmap */ public void setBitmap(Bitmap bitmap) { this.mBitmap = zoomImage(bitmap, 600, 800); startX = -(600 / 2); startY = -(800 / 2); widthX = startX; heightY = startY; postInvalidate(); }做到这一步的时候我们再来看看效果
可以看到我们光有了图片还是远远不够滴，我们还需要一个圆以及一个蒙版效果,那么问题就来了，这个蒙版效果是怎么做的呢,再上一张图，图片来自网络
看到这张图我们要知道先绘制的是黄色的后绘制的是蓝色的，那么我们蒙版的效果要用哪种来实现呢。
我选择用DstOut，这种模式取得是非交集下层部分。理清了思路，接下来我们就继续写代码吧。
private void init() { // 创建空白画布 bitmap = Bitmap.createBitmap(600, 800, Config.ARGB_8888); mCanvas = new Canvas(bitmap); paint = new Paint(); paint.setStyle(Style.FILL); paint.setStrokeWidth(2); paint.setAntiAlias(true); } @Override protected void onDraw(Canvas canvas) { canvas.translate(getWidth() / 2, getHeight() / 2); if (mBitmap != null) { restartCanvas(); canvas.drawBitmap(mBitmap, widthX, heightY, null); mCanvas.drawCircle(-widthX, -heightY, 200, paint); canvas.drawBitmap(bitmap, widthX, heightY, null); } }我们再onDraw中绘制了我们的背景图片以及蒙版效果再加一个半径为200的圆，接下来做的就是不断的改变背景位置来完成移动的效果，每次移动之前要先clear掉上次的画布。 private void restartCanvas() { // 清空上一次的绘图状态 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); mCanvas.drawPaint(paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)); mCanvas.drawColor(getResources().getColor(R.color.bg)); }要记清楚DSTOUT的效果哦！/** * 移动x位置 */ private void getWidthX() { widthX = startX - distanceX; if (widthX > -200) { widthX = -200; distanceX = -100; } else if (widthX < -400) { widthX = -400; distanceX = 100; } } /** * 移动y位置 */ private void getHeightY() { heightY = startY - distanceY; if (heightY > -200) { heightY = -200; distanceY = -100; } else if (heightY < -600) { heightY = -600; distanceY = 100; } } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: x = (int) event.getX(); y = (int) event.getY(); break; case MotionEvent.ACTION_MOVE: distanceX = x - (int) (event.getX()); distanceY = y - (int) (event.getY()); getWidthX(); getHeightY(); break; case MotionEvent.ACTION_UP: startX = widthX; startY = heightY; break; default: break; } postInvalidate(); return true; }今天这部分的代码就到这里了，可以看到目前我们还欠缺的是随手势放大背景图片，以及最后的剪切！这就留到下一次吧。。。
项目源码