Android开发之仿微博贴纸效果实现——进阶篇

上个月写了一篇《Android开发之仿微博贴纸效果实现——基础篇》,文章中提到还有一篇进阶篇要写,很早就想动笔了,因中途去维护了开源库《高仿微信图片选择器2.0版本》,导致耽搁到了现在,刚好趁这几天过年在家休息,把这篇文章给完成了。

我们来回顾下上篇文章所写的内容,我们通过canvas.drawBitmap(mBitmap, mMatrix, null);将Bitmap图像绘制到Canvas上,然后用一个矩阵Matrix配合不同手势来维护图像的变换状态(移动、缩放、旋转)。

这篇文章主要来讲一下多图贴纸的实现思路和代码的设计重构,在上篇文章中,我们实现单个贴纸效果是一个自定义View,那么多个贴纸要如何实现呢?可能有的朋友会想,既然已经实现了单个贴纸,那么多个贴纸只要依葫芦画瓢,让一个ViewGroup去装载多个贴纸不就可以了?确实没毛病,这样做也是可以的,不过中间可能会遇到一些麻烦,比如状态的管理(当多个贴纸重叠在一起时,触摸焦点的判断等)而且之前的实现代码是面向过程的,一整坨的代码维护起来也不是那么的舒服,这里我想介绍一种新思路,用更优雅的方式去实现多图贴纸。

国际惯例,先看一下实现的效果图:


stickerview.gif

关于贴纸的核心代码其实并没有改变(矩阵的变换,坐标点的映射,角度、缩放值的计算等),有了这个前提后,我们抛开代码层面来捋一下思路,想想如何更优雅的实现这个多图贴纸效果。

开源库的使用:

为了方便大家使用,这里我把贴纸库做了封装,目前已经开源了,有什么建议可以随时反馈给我,我会更新维护上去,传送门:StickerView

1、如何在项目中引入该贴纸库:

//gradle引入此行
compile 'com.lcw.library:StickeView:1.0.1'

2、布局设置:

 

3、添加贴纸:

                Sticker sticker = new Sticker(mContext,mBitmap);
                mStickerLayout.addSticker(sticker);

好了,开始我们今天的讲解。

实现思路:

首先我们可以把贴纸看成一个独立个体,在个体里包含了图片,矩阵,初始坐标,焦点等属性,在构建完这些属性后,需要通过Canvas绘制出来 ,还有手势操作,我们通过手势去识别出当前的操作类型和计算出变化的数值,动态去改变矩阵,再通过Canvas绘制出来,其实这些和View并没有直接的关系,所以我们可以把贴纸抽象成一个对象,根据面向对象的编程思想,我们可以大致得到下面这张图:

Android开发之仿微博贴纸效果实现——进阶篇_第1张图片
Sticker贴纸类图(主枝干)

简单的解释下这张图的设计(只体现出关键元素):
ISupportOperation:贴纸的操作接口,这里涉及到贴纸的平移,缩放,旋转,绘制,触摸等操作。
BaseSticker:贴纸基类(抽象类),这里实现了ISupportOperation的部分方法,主要会对根据变换矩阵对贴纸自身的绘制(矩阵)。
Sticker:贴纸类,这里我们会对用户的手势进行分析处理,得到相关的动作和数据,比如平移的距离,缩放的大小,旋转的角度等,然后交给贴纸基类做具体的绘制。
StickerManager:贴纸的管理类,这里维护着所有的贴纸,可以对贴纸进行状态的管理(比如增删改查,焦点状态等)。
StickerLayout:自定义贴纸布局(自定义View),这里会根据触摸坐标从贴纸的管理类中获取当前被操作的贴纸,然后再对触摸事件进行分发,交给具体贴纸类处理。

整理一下流程:
用户触摸贴纸布局(StickerLayout)可以得到触摸坐标,根据坐标我们可以在贴纸管理类中(StickerManager)得到对应的贴纸,然后我们把触摸事件分发给贴纸(Sticker)进行触摸事件的分解,得到相关动作和计算数值,然后交给贴纸基类(BaseSticker)完成自身状态变换和相关绘制,最后通知贴纸布局进行界面刷新。

流程图如下:

Android开发之仿微博贴纸效果实现——进阶篇_第2张图片
Sticker贴纸流程图(主枝干)

编码实现:

了解了实现思路,就完成一大半工作了,剩下的只需要我们用代码将它阐述出来即可,下面给出核心代码:

首先当用户触摸贴纸布局(StickerLayout)的时候,需要根据坐标去获取对一个的贴纸(由于添加贴纸的时候是加入一个List集合,所以再取出贴纸的时候,我们应该倒序去遍历这个集合,才可以拿到最近时间添加的那个贴纸)

   /**
     * 根据触摸坐标返回当前触摸的贴纸
     *
     * @param x
     * @param y
     * @return
     */
    public Sticker getSticker(float x, float y) {

        float[] dstPoints = new float[2];
        float[] srcPoints = new float[]{x, y};

        for (int i = mStickerList.size() - 1; i >= 0; i--) {
            Sticker sticker = mStickerList.get(i);
            Matrix matrix = new Matrix();
            sticker.getMatrix().invert(matrix);
            matrix.mapPoints(dstPoints, srcPoints);
            if (sticker.getStickerBitmapBound().contains(dstPoints[0], dstPoints[1])) {
                return sticker;
            }
        }
        return null;
    }

然后把贴纸交给对应的Sticker类去做处理:

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_POINTER_DOWN:
                //单指是否触摸到贴纸
                mStick = StickerManager.getInstance().getSticker(event.getX(), event.getY());
                if (mStick == null) {
                    if (event.getPointerCount() == 2) {
                        //处理双指触摸屏幕,第一指没有触摸到贴纸,第二指触摸到贴纸情况
                        mStick = StickerManager.getInstance().getSticker(event.getX(1), event.getY(1));
                    }
                }
                break;
            default:
                break;
        }
        if (mStick != null) {
            mStick.onTouch(event);
             invalidate();
        }
        return true;
    }

在贴纸类(Sticker)中处理手势的识别、数据计算和动作下发给贴纸基类(BaseSticker)执行:

    /**
     * 处理触摸事件
     *
     * @param event
     */
    public void onTouch(MotionEvent event) {
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                //有触摸到贴纸
                mMode = Sticker.MODE_SINGLE;
                //记录按下的位置
                mLastSinglePoint.set(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                if (event.getPointerCount() == 2) {
                    mMode = Sticker.MODE_MULTIPLE;
                    //记录双指的点位置
                    mFirstPoint.set(event.getX(0), event.getY(0));
                    mSecondPoint.set(event.getX(1), event.getY(1));
                    //计算双指之间向量
                    mLastDistanceVector.set(mFirstPoint.x - mSecondPoint.x, mFirstPoint.y - mSecondPoint.y);
                    //计算双指之间距离
                    mLastDistance = calculateDistance(mFirstPoint, mSecondPoint);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (mMode == MODE_SINGLE) {
                    translate(event.getX() - mLastSinglePoint.x, event.getY() - mLastSinglePoint.y);
                    mLastSinglePoint.set(event.getX(), event.getY());
                }
                if (mMode == MODE_MULTIPLE && event.getPointerCount() == 2) {
                    //记录双指的点位置
                    mFirstPoint.set(event.getX(0), event.getY(0));
                    mSecondPoint.set(event.getX(1), event.getY(1));
                    //操作自由缩放
                    float distance = calculateDistance(mFirstPoint, mSecondPoint);
                    //根据双指移动的距离获取缩放因子
                    float scale = distance / mLastDistance;
                    scale(scale, scale);
                    mLastDistance = distance;
                    //操作自由旋转
                    mDistanceVector.set(mFirstPoint.x - mSecondPoint.x, mFirstPoint.y - mSecondPoint.y);
                    rotate(calculateDegrees(mLastDistanceVector, mDistanceVector));
                    mLastDistanceVector.set(mDistanceVector.x, mDistanceVector.y);
                }
                break;
            case MotionEvent.ACTION_UP:
                reset();
                break;
        }
    }

在贴纸基类(BaseSticker)执行贴纸类(Sticker)下发的动作命令:

    /**
     * 平移操作
     *
     * @param dx
     * @param dy
     */
    @Override
    public void translate(float dx, float dy) {
        mMatrix.postTranslate(dx, dy);
        updatePoints();
    }

    /**
     * 缩放操作
     *
     * @param sx
     * @param sy
     */
    @Override
    public void scale(float sx, float sy) {
        mMatrix.postScale(sx, sy, mMidPointF.x, mMidPointF.y);
        updatePoints();
    }

    /**
     * 旋转操作
     *
     * @param degrees
     */
    @Override
    public void rotate(float degrees) {
        mMatrix.postRotate(degrees, mMidPointF.x, mMidPointF.y);
        updatePoints();
    }

    /**
     * 当矩阵发生变化的时候,更新坐标点(src坐标点经过matrix映射变成了dst坐标点)
     */
    private void updatePoints() {
        //更新贴纸点坐标
        mMatrix.mapPoints(mDstPoints, mSrcPoints);
    }
    /**
     * 绘制贴纸自身
     *
     * @param canvas
     * @param paint
     */
    @Override
    public void onDraw(Canvas canvas, Paint paint) {
        //绘制贴纸
        canvas.drawBitmap(mStickerBitmap, mMatrix, paint);
        if (isFocus) {
            //绘制贴纸边框
            canvas.drawLine(mDstPoints[0] - PADDING, mDstPoints[1] - PADDING, mDstPoints[2] + PADDING, mDstPoints[3] - PADDING, paint);
            canvas.drawLine(mDstPoints[2] + PADDING, mDstPoints[3] - PADDING, mDstPoints[4] + PADDING, mDstPoints[5] + PADDING, paint);
            canvas.drawLine(mDstPoints[4] + PADDING, mDstPoints[5] + PADDING, mDstPoints[6] - PADDING, mDstPoints[7] + PADDING, paint);
            canvas.drawLine(mDstPoints[6] - PADDING, mDstPoints[7] + PADDING, mDstPoints[0] - PADDING, mDstPoints[1] - PADDING, paint);
            //绘制移除按钮
            canvas.drawBitmap(mDelBitmap, mDstPoints[0] - mDelBitmap.getWidth() / 2 - PADDING, mDstPoints[1] - mDelBitmap.getHeight() / 2 - PADDING, paint);
        }
    }

最后完成贴纸布局的刷新:

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        List stickerList = StickerManager.getInstance().getStickerList();
        for (int i = 0; i < stickerList.size(); i++) {
            Sticker sticker = stickerList.get(i);
            sticker.onDraw(canvas, mPaint);
        }
    }

具体的贴纸实现代码在上篇文章已经提过了,所以这里就不再重复的代码粘贴,不清楚的朋友可以看下上篇的文章,或者去github下载源码细看。

好了,到这里文章就结束啦~

源码下载:

这里附上源码地址(欢迎Star,欢迎Fork):StickerView

你可能感兴趣的:(Android开发之仿微博贴纸效果实现——进阶篇)