利用自定义View实现头像截取页面_html/css

利用自定义View实现头像截取页面_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:48:59

asal

1382 orang telah melayarinya

在一些应用中，特别是有帐号体系的应用，通过相册选择图片和照相机拍照，然后对所获取的头像进行截取，最后获取选择框中的内容作为头像，一般效果会如下显示：

那么，如何制作这样一个效果呢，关键点在哪里呢？

做法其实可以有多种，

1）可以直接继承ImageView，然后在ImageView的OnDraw函数中直接绘制圆形或者方形的高亮圈；

2）也可以直接继承View，自己将Bitmap给传进来，在onDraw函数中先绘制图片，接着利用Path来绘制这个圆形或者方形的选择区域，利用Region.OP.DIFFERENCE来反向获取蒙板层。

不过利用clipPath来实现这个蒙板层的绘制，画出来的圆形会有锯齿，这个目前我还没有找到比较好的办法去掉这个锯齿，不知道有没有哪位朋友能够提供一下建议。

关键代码如下：

    @Override    protected void onDraw(Canvas canvas) {                if(!mIsInit){            initCropRect(getWidth(), getHeight());            mOptBitmap = getProperBitmap(mBitmap, mCropRect.width());            ...               mIsInit = true;        }                canvas.save();        canvas.concat(mDrawMatrix);        canvas.drawBitmap(mOptBitmap, 0, 0, null);           canvas.restore();                   if(mToDrawHighlight){            canvas.save();            mPath.reset();                        if (mIsCircle) {                float radius = mCropRect.width() / 2 ;                mPath.addCircle(mCropRect.left + radius, mCropRect.top + radius, radius, Path.Direction.CW);            } else {                mPath.addRect(mCropRect, Path.Direction.CW);            }                                            canvas.clipPath(mPath, Region.Op.DIFFERENCE);            canvas.drawPaint(mDimPaint);            canvas.restore();                                }    }

Salin selepas log masuk

大家只关注关键代码即可。

首先，在第一次Ondraw的时候，已经可以获取当前View和bitmap的大小，这个时候，我们要先确定CropRect，也即选择框的大小和范围，不管是圆形，还是方形，其实都是一个正方形区域，所以，首先要确定这个区域，这是在代码initCropRect中实现的。

而紧接着的操作，其实是对图片的一些移动和缩放操作，为了使图片能够居中，或者将比较小的图片放大到选择区域那么大，大家可先暂时忽略。

接下来利用canvas.drawBitmap将对应的位图画出来先。

第二步，我们要先定义一个Path，根据画圆还是画方，在path上添加一个图形，然后利用clipPath和Region.OP.DIFFERENCE来反向获取蒙板区域，然后在Canvas上利用mDimPaint来画蒙板（mDimPaint就是一个颜色为半透明的画笔，这样才不会遮盖掉画在下面的bitmap）。

画出蒙板和选择圈之后，更多时候，我们还需要对图片进行移动和缩放，类似于微信和支付宝那样，那么我们可以利用GestureDetector和ScaleGestureDetector来实现对移动和缩放的控制，如下：

mScaleGestureDetector = new ScaleGestureDetector(context, this);mGestureDetector = new GestureDetector(context, new MyGestureListener());

Salin selepas log masuk

其中MyGestureListener是我们自定义的一个GestureDetector，因为我们并不需要太多的Gesture,所以我们可以利用SimpleOnGestureListener来实现我们处理，如下：

    class MyGestureListener extends SimpleOnGestureListener {                @Override        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY){            mDrawMatrix.postTranslate(-distanceX, -distanceY);            checkBorderWhenTranslate();            return true;                                }           }

Salin selepas log masuk

其实很简单，在当前View上往某个方向移动的时候，我们是需要将Canvas反方向移动，这样画出来的bitmap才是跟着我们手指移动，所以这里为什么是负数的distance的原因就在这。

这只是针对移动的，还需要缩放的，我们就需要实现一个OnScaleGestureListener，让当前的view去实现此接口即可，如下：

float scaleFactor = detector.getScaleFactor();                 float[] values = new float[9];        mDrawMatrix.getValues(values);        float curScale = values[Matrix.MSCALE_X];                if ((curScale  1.0f) || (curScale > mInitScale && scaleFactor  SCALE_MAX) {                scaleFactor = SCALE_MAX / curScale;            }            mDrawMatrix.postScale(scaleFactor, scaleFactor, detector.getFocusX(), detector.getFocusY());            checkBorderAndCenterWhenScale();        }                return true;

Salin selepas log masuk

这里边具体的逻辑就依赖于各位朋友自己的想法了，最后不要忘了，从哪里获取到这些移动事件呢，当然是onTouch方法里面，如下：

    @Override    public boolean onTouch(View v, MotionEvent event) {        ...        mScaleGestureDetector.onTouchEvent(event);        mGestureDetector.onTouchEvent(event);              invalidate();        return true;    }

Salin selepas log masuk

好了，关于如何利用自定义View截取头像的大概思路就跟各位朋友说到这了，大家可以自行根据此思路再完善一下。