Use custom View to capture avatar page_html/css_WEB-ITnose

In some applications, especially those with an account system, you can select pictures through the album and take pictures with the camera, then intercept the obtained avatar, and finally obtain the content in the selection box as the avatar. The general effect will be as follows Display:

So, how to create such an effect, and what are the key points?

There are actually many ways to do it,

1) You can directly inherit ImageView, and then directly draw a circular or square highlight circle in the OnDraw function of ImageView;

2) You can also directly inherit View, pass in the Bitmap yourself, draw the picture first in the onDraw function, then use Path to draw the circular or square selection area, and use Region.OP.DIFFERENCE to reversely obtain the mask layer. .

However, when using clipPath to draw this mask layer, the drawn circle will have jagged edges. I haven’t found a better way to remove the jagged edges yet. I wonder if any friends can provide it. Some suggestions.

The key codes are as follows:

    @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();                                }    }

Everyone only pays attention to the key codes.

First of all, during the first Ondraw, the size of the current View and bitmap can be obtained. At this time, we must first determine the CropRect, that is, the size and range of the selection box, whether it is a circle Shape or square, it is actually a square area, so you must first determine this area, which is implemented in the code initCropRect.

The operations that follow are actually some moving and scaling operations on the image. In order to center the image or enlarge a smaller image to the size of the selected area, you can ignore it for now.

Next, use canvas.drawBitmap to draw the corresponding bitmap.

The second step is to define a Path first, add a graphic to the path depending on whether to draw a circle or a square, and then use clipPath and Region.OP.DIFFERENCE to reversely obtain the mask area, and then Use mDimPaint to draw the mask on Canvas (mDimPaint is a brush with a semi-transparent color, so as not to cover up the bitmap painted underneath).

After drawing the mask and selection circle, more often, we need to move and zoom the image, similar to WeChat and Alipay, then we can use GestureDetector and ScaleGestureDetector to control movement and scaling, as follows:

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

where MyGestureListener is a GestureDetector we customized, because we do not We don’t need too many Gestures, so we can use SimpleOnGestureListener to implement our processing, as follows:

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

In fact, it is very simple. When the current View moves in a certain direction, We need to move the Canvas in the opposite direction, so that the drawn bitmap moves with our finger, so this is the reason why there is a negative distance here.

This is only for mobile and needs to be scaled. We need to implement an OnScaleGestureListener and let the current view implement this interface, as follows:

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

The specific logic here depends on your own ideas. Finally, don’t forget, where to get these mobile events, of course, in the onTouch method, as follows:

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

Okay, this is the general idea about how to use a custom View to capture an avatar. You can improve it by yourself based on this idea.