uCrop源码思路分析--流程梳理

首先要把思路弄清楚，先将这个项目运行在手机上，玩一玩，看看他都有哪些功能，然后再考虑那些功能是怎么实现的。
项目Github链接
第一阶段
折腾一番后就大致有个印象了，接下就可以分析具体功能了，且不看布局这些是怎么弄的，先从这个库的入口开始分析，就是我们是怎么与图片进行交互的，手势！ 对，我们通过手势来改变图片的显示，可以平移，旋转，放大，我们应该从这里切入，整个思路就会比较清晰。
那么，问题来了。
如何分配这些功能，我应该创建几个类，他们之间应该是怎样的继承关系等等，这就是体现作者功底的时候了，究竟该如何架构，是很值得研究的问题。
1.手势的处理
我们需要一个类，这个类可以识别用户的手势，然后调用相应的方法。这里肯定涉及到多点触控
问题1：如何判断用户的最后一根手指已经释放？
假如我们现在已经拿到了用户的手势，那么肯定需要接着调用某个类的某种方法来进行处理，比如，我们已经识别出是一个平移的手势，势必有一个postTranslate(disX,disY)方法来对应。
那具体平移的操作又该放在哪个类中呢，还有缩放，旋转，裁剪等等方法。
问题2：如何确定类的功能，如何去耦合
我是想不到一个完美的方案来解决这个问题，或者说，我必须要在做的过程中慢慢的优化架构，而暂时不具备在开始项目的时候就直接描绘出轮廓，毕竟是菜鸟。
分层的思想
作者在这里分出了三个类，各有不同的功能
GestureCropImageView
专门识别用户的手势，平移，缩放，旋转。他并不关心怎样去做具体的操作，也不关心裁剪。
TransformImageView
基本功能包括加载图片，对图片进行平移，缩放，旋转，并且通知监听者正在进行哪些操作。
CropImageView
核心类。具体的手势识别，具体的平移操作，这些都只是一个功能点，这个类的作用更像是一个管理者，负责将这些功能点组合起来，达到好的用户体验和库真正功能的实现。

---

第二阶段
第一阶段只是一个大致的印象，有了一个宏观脉络，可以到现在，我们还一行代码都没看呢？
折腾这个库的时候，我很好奇他进去的时候是如何摆放图片和裁剪提示框的，如何做到正好能让他们吻合。
问题3：怎样初始化我们的裁剪控件，达到和裁剪提示框吻合的效果
作者使用了一个uCropView作为外层嵌套布局，里面包含我们的裁剪提示框OverlayView和裁剪控件GestureCropImageView.
因为作者将这个库设计得很灵活，用户可以选择指定的裁剪比例，有16:9，4:3等，还可以使用原生图片的宽高比，并且在控件中可以动态调整裁剪比例，这就必然需要两个控件之间进行交互，最好的办法就是设置一个监听器。

mGestureCropImageView.setCropBoundsChangeListener(new CropImageView.CropBoundsChangeListener() {
            @Override
            public void onCropBoundsChangedRotate(float cropRatio) {
                if (mOverlayView != null) {
                    mOverlayView.setTargetAspectRatio(cropRatio);
                    mOverlayView.postInvalidate();
                }
            }
        });

具体使用场景我们后面再看。
根据作者的布局，TransformImageView 是顶层父类（至于为什么这么架构，也可以有小小的思考）。看看他做了哪些事情。
这时我们要跳到外面的UCropActivity中去看看数据是怎样给的。
在setImageData（）方法中，会指定图片的uri

mGestureCropImageView.setImageUri(inputUri, mOutputUri);

TransformImageView

   public void setImageUri(@NonNull Uri imageUri, @NonNull Uri outputUri) throws Exception {
        mImageUri = imageUri;
        int maxBitmapSize = getMaxBitmapSize();

        BitmapLoadUtils.decodeBitmapInBackground(getContext(), imageUri, outputUri, maxBitmapSize, maxBitmapSize,
                new BitmapLoadCallback() {
                    @Override
                    public void onBitmapLoaded(@NonNull final Bitmap bitmap) {
                        mBitmapWasLoaded = true;
                        setImageBitmap(bitmap);
                        invalidate();
                    }

                    @Override
                    public void onFailure(@NonNull Exception bitmapWorkerException) {
                        Log.e(TAG, "onFailure: setImageUri", bitmapWorkerException);
                        if (mTransformImageListener != null) {
                            mTransformImageListener.onLoadFailure(bitmapWorkerException);
                        }
                    }
                });
    }

我们暂时只需要知道这是一个后台解析图片的方法，成功后可以拿到Bitmap,设置给ImageView，然后重新布局，重新绘制。
就我感觉，我们之前说的根据裁剪比例来布局图片现在应该可以体现了。
根据上面的代码，我们已经在UCropView中给裁剪控件设置了比例，CropImageView重写了onImageLaidOut()方法，很重要，这里会确定裁剪框矩形和图片矩形。

 //在Random模式下，走的是这段代码
        if (mTargetAspectRatio == SOURCE_IMAGE_ASPECT_RATIO) {
            mTargetAspectRatio = drawableWidth / drawableHeight;
        }

        setupCropBounds(); //设置裁剪框矩形
        setupInitialImagePosition(drawableWidth, drawableHeight); //设置图片初始位置

至于设置裁剪框的细节代码，我们后面会拉出来分析，这里是梳理前期的流程。

 if (mCropBoundsChangeListener != null) {
            mCropBoundsChangeListener.onCropBoundsChangedRotate(mTargetAspectRatio);
        }

当我们确定了裁剪框的位置之后，通知OverlayView进行重绘（这又是另一细节问题了）。
然后，我们摆放图片的位置。

    private void setupInitialImagePosition(float drawableWidth, float drawableHeight) {
        float cropRectWidth = mCropRect.width();
        float cropRectHeight = mCropRect.height();

        float widthScale = cropRectWidth / drawableWidth;
        float heightScale = cropRectHeight / drawableHeight;

        mMinScale = Math.max(widthScale, heightScale);
        mMaxScale = mMinScale * mMaxScaleMultiplier;

        float tw = (cropRectWidth - drawableWidth * mMinScale) / 2.0f + mCropRect.left;
        float th = (cropRectHeight - drawableHeight * mMinScale) / 2.0f + mCropRect.top;

        mCurrentImageMatrix.reset();
        mCurrentImageMatrix.postScale(mMinScale, mMinScale);
        mCurrentImageMatrix.postTranslate(tw, th);


    }

这里传入的是原生图片的宽高。
因为图片的位置和裁剪框的位置在初始时肯定是不吻合的，我们可能需要平移，缩放之后才能让他们吻合（又一个细节）
到这里，图片已经正确摆放，和裁剪提示框吻合。

---

第三阶段
图片正确的摆放之后，剩下的就回到我们之前的问题了—识别手势，调用方法。
如上所说，识别手势的方法全在GestureCropImageView 这个类中了。
小技巧：自己无需计算细节来识别手势，只需使用已经封装好的类，将事件传递给他即可，他自然会给你提供回调方法的。

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        if ((event.getAction() & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_DOWN) {
            cancelAllAnimations();
        }
        if (event.getPointerCount() > 1) {
            mMidPntX = (event.getX(0) + event.getX(1)) / 2;
            mMidPntY = (event.getY(0) + event.getY(1)) / 2;
        }
            mGestureDetector.onTouchEvent(event);//手势识别
        if (mIsScaleEnabled) {
            mScaleDetector.onTouchEvent(event);//缩放识别
        }
        if (mIsRotateEnabled) {
            mRotateDetector.onTouchEvent(event);//旋转识别
        }
        if ((event.getAction() & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_UP) {  //处理手指释放
            setImageToWrapCropBounds();
        }
  }

在回调方法中就是各种postXX了，这里有个小细节，因为之前没有做过多点触控，这里正好回答第一个问题，怎样判断最后一根手指释放了。
对于多根手指，最后一根的释放触发ACTION_UP,之前的手指释放事件触发ACTION_POINTER_UP。
所有的平移，缩放，旋转都是交给TransformImageView 这个类来完成的，一起来看看。
以平移为例

   public void postTranslate(float deltaX, float deltaY) {
        if (deltaX != 0 || deltaY != 0) {
            mCurrentImageMatrix.postTranslate(deltaX, deltaY);
            setImageMatrix(mCurrentImageMatrix);
        }
    }

其他的方法也都是通过Matrix实现的，我也是第一次接触，感觉是一个强大的类，暂时只需要知道他怎么用，有需要的可以深入研究。
当你设置了这个矩阵之后，在View的绘制过程中会进行判断，根据该矩阵对canvas作出变换，使你能够画出想要的结果。
好了，流程梳理就到这了，后面的文章会接着分析一个个具体的实现，欢迎大家交流。