Android 仿照QQ剪裁头像(完结篇)

最新推荐文章于 2021-05-26 03:16:13 发布
最新推荐文章于 2021-05-26 03:16:13 发布
阅读量4.1k 收藏 8
点赞数 3
文章标签： Android qq qq头像
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014163726/article/details/48318989
版权

转载请注明出处:
http://blog.csdn.net/u014163726?viewmode=contents
本文出自Wrh的博客

闲扯

最近刚好空闲下来又因为以前有人问到过这个仿qq上传头像的问题，抓紧时间撸出一篇博客

  1. 本章内容部分手势检测出自翔神的博客
  2. 本章内容匆忙赶出估计会有bug希望发现的人可以在评论告诉我
  3. 好好学习，天天向上，像大神学习

正文

还记得我上一篇关于仿qq上传头像时继承的是View，现在我们继承ImageView来实现，继承ImageView的好处有很多包括在缩放的处理上等等。

首先我们还是先从在图片上绘制阴影开始。

private RectF shelterR;
private Paint mPaint;
public CustomImageView(Context context) {
    this(context,null);
}

public CustomImageView(Context context, AttributeSet attrs) {
    this(context, attrs,0);
}

public CustomImageView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    mPaint = new Paint();
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setStrokeWidth(2);
    mPaint.setAntiAlias(true);
    mPaint.setColor(getResources().getColor(R.color.background));
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (getDrawable() == null){
        return;
    }
    float width = getDrawable().getIntrinsicWidth();
    float height = getDrawable().getIntrinsicHeight();
    if (shelterR == null || shelterR.isEmpty()) {
        shelterR = new RectF(0, 0,width, height);
    }
    // 画入前景圆形蒙板层
    int sc = canvas.saveLayer(shelterR, null, Canvas.MATRIX_SAVE_FLAG
            | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
            | Canvas.CLIP_TO_LAYER_SAVE_FLAG | Canvas.ALL_SAVE_FLAG);
    canvas.drawRect(shelterR, mPaint);
    canvas.restoreToCount(sc);
}

可能很多朋友要问这段代码的意思了

    int sc = canvas.saveLayer(shelterR, null, Canvas.MATRIX_SAVE_FLAG
            | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
            | Canvas.CLIP_TO_LAYER_SAVE_FLAG | Canvas.ALL_SAVE_FLAG);
    canvas.drawRect(shelterR, mPaint);
    canvas.restoreToCount(sc);

先放一个参考资料Android中的canvas介绍
我的理解可能比较简单就认为这其实就像拓印纸

canvas.saveLayer

就像是在一层新的画布上绘制东西

canvas.restoreToCount(sc)

则是把在新画布绘制的所有东西拓印到上一层

我们在新画布上的任何操作绘制出来的图形都会restore到上一层画布,阴影绘制完毕我们就开始绘制中心的圆,这个我已经讲过挺多次的了这次就不详细说明了Android PorterDuff.Mode与Canvas实际使用

这些前期准备都做完之后我们考虑一些细节，我们应该让我们的图片居中显示并且保证图片的长宽肯定要大于剪裁圆形的直径 

  @Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    getViewTreeObserver().addOnGlobalLayoutListener(this);
}

@SuppressWarnings("deprecation")
@Override
protected void onDetachedFromWindow()
{
    super.onDetachedFromWindow();
    getViewTreeObserver().removeGlobalOnLayoutListener(this);
}

    @Override
public void onGlobalLayout() {
    if (once)
    {
        Drawable d = getDrawable();
        if (d == null)
            return;
        int width = getWidth();
        int height = getHeight();
        int diameter = mRadius * 2;
        int dw = d.getIntrinsicWidth();
        int dh = d.getIntrinsicHeight();
        float scale = 1.0f;
        if (dw < diameter && dh > diameter)
        {
            scale = diameter * 1.0f / dw;
        }
        if (dh < diameter && dw > diameter){
            scale = diameter * 1.0f / dh;
        }
        if (dh < diameter && dw <diameter){
            scale = Math.max(diameter * 1.0f / dw, diameter * 1.0f / dh);
        }
        initScale = scale;
        // 图片移动至屏幕中心
        mScaleMatrix.postTranslate((width - dw) / 2, (height - dh) / 2);
        mScaleMatrix
                .postScale(scale, scale, getWidth() / 2, getHeight() / 2);
        setImageMatrix(mScaleMatrix);
        once = false;
    }
}

我们再onGlobalLayout()中保证了图片的宽高,ok到这一步我们已经初见模型了

移动图片

接下来我们要考虑的就是移动这个图片，但要注意我们要限制它移动的距离。

 @Override
public boolean onTouchEvent(MotionEvent event) {
    if (mGestureDetector.onTouchEvent(event))
        return true;
    mScaleGestureDetector.onTouchEvent(event);
    float x = 0, y = 0;
    // 拿到触摸点的个数
    final int pointerCount = event.getPointerCount();
    // 得到多个触摸点的x与y均值
    for (int i = 0; i < pointerCount; i++)
    {
        x += event.getX(i);
        y += event.getY(i);
    }
    x = x / pointerCount;
    y = y / pointerCount;
    /**
     * 每当触摸点发生变化时，重置mLasX , mLastY
     */
    if (pointerCount != lastPointerCount)
    {
        mLastX = x;
        mLastY = y;
    }
    lastPointerCount = pointerCount;
    switch (event.getAction()){
        case MotionEvent.ACTION_MOVE:
            float dx = x - mLastX;
            float dy = y - mLastY;

            if (shelterR.left + dx >= circleR.left || shelterR.right + dx <= circleR.right){
                dx = 0;
            }
            if (shelterR.top + dy >  circleR.top || shelterR.bottom + dy <= circleR.bottom){
                dy = 0;
            }
            mScaleMatrix.postTranslate(dx, dy);
            setImageMatrix(mScaleMatrix);
            mLastX = x;
            mLastY = y;
            postInvalidate();
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            lastPointerCount = 0;
            break;
    }
    return true;
}

我们在Touch事件中做了判断以保证移动不会越界shelterR是我们图形的RectF,circleR是我们的中心圆形的RectF。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (getDrawable() == null){
        return;
    }
    getShelterRectF();
    // 画入前景圆形蒙板层
    int sc = canvas.saveLayer(shelterR, null, Canvas.MATRIX_SAVE_FLAG
            | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
            | Canvas.CLIP_TO_LAYER_SAVE_FLAG | Canvas.ALL_SAVE_FLAG);
    canvas.drawRect(shelterR, mPaint);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
    mPaint.setColor(Color.WHITE);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, mPaint);
    if (circleR == null){
        circleR = new RectF(getWidth() / 2 - mRadius, getHeight() / 2 - mRadius,getWidth() / 2 + mRadius,getHeight() / 2 + mRadius);
    }
    canvas.restoreToCount(sc);
    mPaint.setXfermode(null);
    mPaint.setColor(getResources().getColor(R.color.background));
}   
 /**
 * 用来保证阴影的大小足以遮住图片
 * @return
 */
private RectF getShelterRectF(){
    float x = (int) getTranslateX();
    float y = (int) getTranslateY();
    float width = getDrawable().getIntrinsicWidth() * getScale();
    float height = getDrawable().getIntrinsicHeight() * getScale();
    if (shelterR == null) {
        shelterR = new RectF(x, y,width + x, height + y);
    }else{
        shelterR.set(x, y,width + x, height + y);
    }
    return shelterR;
}

可以看到我们在onDraw()中做的事情并不多，这也是继承ImageView的好处之一，ok现在就让我享受移动的感觉（移动的信号真的差），效果如图

缩放图片

现在我们基本成型了，我们继续完成缩放功能，在这还是要说明本章手势检测功能出自Android 手势检测实战 打造支持缩放平移的图片预览效果

  @Override
public boolean onScale(ScaleGestureDetector detector) {
    float scale = getScale();
    float scaleFactor = detector.getScaleFactor();

    if (getDrawable() == null)
        return true;

    /**
     * 缩放的范围控制
     */
    if ((scale < SCALE_MAX && scaleFactor > 1.0f)
            || (scale > initScale && scaleFactor < 1.0f))
    {
        /**
         * 最大值最小值判断
         */
        if (scaleFactor * scale < initScale)
        {
            scaleFactor = initScale / scale;
        }
        if (scaleFactor * scale > SCALE_MAX)
        {
            scaleFactor = SCALE_MAX / scale;
        }
        /**
         * 设置缩放比例
         */
        mScaleMatrix.postScale(scaleFactor, scaleFactor,
                detector.getFocusX(), detector.getFocusX());
        checkBorderAndCenterWhenScale();
        setImageMatrix(mScaleMatrix);
    }
    return true;
}

@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
    return true;
}

@Override
public void onScaleEnd(ScaleGestureDetector detector) {

}
/**
 * 在缩放时，进行图片显示范围的控制
 */
private void checkBorderAndCenterWhenScale()
{

    RectF rect = getMatrixRectF();
    float deltaX = 0;
    float deltaY = 0;

    int width = getWidth();
    int height = getHeight();

    // 如果宽或高大于屏幕，则控制范围
    if (rect.width() >= width)
    {
        if (rect.left > 0)
        {
            deltaX = -rect.left;
        }
        if (rect.right < width)
        {
            deltaX = width - rect.right;
        }
    }
    if (rect.height() >= height)
    {
        if (rect.top > 0)
        {
            deltaY = -rect.top;
        }
        if (rect.bottom < height)
        {
            deltaY = height - rect.bottom;
        }
    }
    // 如果宽或高小于屏幕，则让其居中
    if (rect.width() < width)
    {
        deltaX = width * 0.5f - rect.right + 0.5f * rect.width();
    }
    if (rect.height() < height)
    {
        deltaY = height * 0.5f - rect.bottom + 0.5f * rect.height();
    }
    mScaleMatrix.postTranslate(deltaX, deltaY);
}

还是要像大神学习(づ￣ 3￣)づ，再加上双击判断

 private class AutoScaleRunnable implements Runnable
{
    static final float BIGGER = 1.07f;
    static final float SMALLER = 0.93f;
    private float mTargetScale;
    private float tmpScale;

    /**
     * 缩放的中心
     */
    private float x;
    private float y;

    /**
     * 传入目标缩放值，根据目标值与当前值，判断应该放大还是缩小
     *
     * @param targetScale
     */
    public AutoScaleRunnable(float targetScale, float x, float y)
    {
        this.mTargetScale = targetScale;
        this.x = x;
        this.y = y;
        if (getScale() < mTargetScale)
        {
            tmpScale = BIGGER;
        } else
        {
            tmpScale = SMALLER;
        }

    }

    @Override
    public void run()
    {
        // 进行缩放
        mScaleMatrix.postScale(tmpScale, tmpScale, x, y);
        checkBorderAndCenterWhenScale();
        setImageMatrix(mScaleMatrix);

        final float currentScale = getScale();
        // 如果值在合法范围内，继续缩放
        if (((tmpScale > 1f) && (currentScale < mTargetScale))
                || ((tmpScale < 1f) && (mTargetScale < currentScale)))
        {
            WrhImageView.this.postDelayed(this, 16);
        } else
        // 设置为目标的缩放比例
        {
            final float deltaScale = mTargetScale / currentScale;
            mScaleMatrix.postScale(deltaScale, deltaScale, x, y);
            checkBorderAndCenterWhenScale();
            setImageMatrix(mScaleMatrix);
            isAutoScale = false;
        }

    }
}

剪裁图片

最后一步了，想必大家的心情都很激动。

 /**
 * 剪裁头像
 * @return
 */
public Bitmap clipBitmap(){
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    int dw = getDrawable().getIntrinsicWidth();
    int dh = getDrawable().getIntrinsicHeight();
    float x = getTranslateX() - (getWidth() - dw) / 2;
    float y = getTranslateY() - (getHeight() - dh) / 2;
    mBitmap = zoomBitmap(mBitmap);
    Bitmap target = Bitmap.createBitmap(mRadius * 2, mRadius * 2, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(target);
    canvas.drawCircle(mRadius, mRadius, mRadius, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

    canvas.drawBitmap(mBitmap,- (dw / 2 - mRadius) + x ,- (dh / 2 - mRadius) + y, paint);
    return target;
}

我们来实际测试一下感受一下

结束语

啊，啊，啊，代码基于Android Studio所写，下一篇又不知道要猴年马月了，和大神还是有差距要更努力↖(^ω^)↗
Bye

项目代码

苏武难飞
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
仿QQ头像自定义截取功能
我的Android之旅
10-11 2127
看了android版QQ的自定义头像功能，决定自己实现，随便熟悉下android绘制和图片处理这一块的知识。先看看效果： 重点内容 思路分析:这个效果可以用两个View来完成，上层View是一个遮盖物，绘制半透明的颜色，中间挖了一个圆；下层的View用来显示图片，具备移动和缩放的功能，并且能截取某区域内的图片。涉及到的知识点：1.Matrix，图片的移动和缩放 2.Paint的setXfe
仿QQ头像裁剪功能
Water的博客
06-02 2374
转载请注明出处：http://blog.csdn.net/binbinqq86/article/details/46331561 项目中要用到图片裁剪，调用了系统自带的裁剪功能，发现不好用，于是就自己仿照QQ的头像设置裁剪功能实现了一个，感觉还不错 先说说主要的功能：调用系统自带相机或者系统图库进行拍照图片的选择（完美解决大图内存溢出问题，亲测小米华为拍出的十几M图片均可使用，完美解决三星等部
android 仿qq头像编辑,Android仿QQ讨论组头像效果
weixin_31957989的博客
05-26 173
本文实例为大家分享了Android仿QQ讨论组头像展示的具体代码，供大家参考，具体内容如下一、效果图二、实现基本实现过程：1.将原图片读取为bitmap2.在Canvas画布上计算出图片位置，并绘制新的图片。(ps:计算位置对我来说是难点，花了好长时间)；三、源码1.布局文件android:layout_width="match_parent"android:layout_height="matc...
仿QQ自定义头像截取功能
10-11
仿Android版qq的自定义头像截取功能，可以随意截取图片的某部分作为头像。
Android 仿qq剪裁头像(完结篇)
09-09
本代码基于Android studio，是仿照qq剪裁头像所写
Android 仿照QQ剪裁头
03-23
Android 仿照QQ剪裁头
Android 仿照QQ、微信剪裁头像
01-05
Android 仿照QQ、微信剪裁图片 ， 上传头像
android 仿照QQ5.2最新的头像剪裁功能
01-13
这是一个自定义view，叫CutPicView，CutPicView的结构分为3层（上图的下面三层），分别是背景（白色的）、bitmap层（图片层，就是你要切割的图片）、前景蒙版层（黑色的、半透明的）。而最上面一层圆形的图片是切割...
Android-仿照qq列表分类悬浮
08-13
仿照qq列表，分类悬浮
仿qq上传头像
04-26
仿qq弹出蒙版上传头像
高仿QQ安卓版头像裁剪升级完美版
03-03
高仿QQ安卓版头像裁剪升级完美版，详情请查看csdn博客：http://blog.csdn.net/baiyuliang2013
仿QQ头像选择以及上传Demo（完整代码）
10-18
高仿QQ头像上传，包括选择本地相册以及拍照。
Android 仿QQ头像自定义截取功能
03-04
在我们的qq聊天工具中，经常会使用qq头像截取功能，基于代码是怎么实现的呢？下面小编通过本文给大家分享android 仿qq头像自定义截取功能的思路分析及编码实现过程，感兴趣的朋友一起学习吧
C语言仿QQ截图
09-24
windows sdk实现的仿QQ截图程序
高仿QQ头像截取
白玉梁的专栏
03-03 7230
花费了半天时间，把 仿QQ头像截取的方法整理了下，并制作了一个demo以供大家参考，基本上实现了qq中我的资料界面上（包括背景透明化，上滑标题栏显示，下拉隐藏等）的大致效果，先上图看效果吧： 支持的功能：     1.选择裁剪的图片支持手势放大缩小（包括双击放大缩小）；     2.判断图片边缘，即裁剪区域不会超过图片边
Android 仿qq上传头像(一)
WRH的专栏
04-11 4231
这么长时间没写博客感觉手都要生了啊，最近因为工作的关系来到了上海，目前还算稳定，所以抓紧时间写篇博客压压惊。      标题早已经看穿一切，这次我们来模仿一下qq上传头像的功能，先上一个未完成版的效果图,银魂第四季重开放上一张萌萌哒的图片。          这还是要用到我们自定义View的知识，首先从相册中获取图片的部分我就不详细介绍了。 /** * 获得图片 */ pr
仿QQAndroid调用摄像头拍照和从相册中选择（上传头像）
05-23
仿QQAndroid调用摄像头拍照和从相册中选择（上传、更换头像）
android 仿照网页分页器
最新发布
08-11
Android仿照网页分页器是指在Android应用中实现类似网页中的分页功能。在网页中，分页器通常用于将长篇文章或长列表分为多页，以方便用户阅读和浏览。 在Android应用中，实现仿照网页的分页器可以通过以下步骤完成...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值