Android 知识产品与务实Android开发

查看大图之超长图处理

2017-09-14  本文已影响448人  信马归风

关于Android的超长图处理，可以很容易的找到解决方案，即用BitmapRegionDecoder来分区域生成bitmap来实现，但是在实践过程中发现，各中细节并不是那么容易，下面分享一下其中的技术难点。

实现目标

类似于微博和微信，对于超长图的处理。

  1. 双击进入超长图模式，超长图自动占满全屏方便阅读
  2. 滑动到哪里，哪个区域变得清晰
  3. 带惯性的流畅滑动

实现思路

  1. 捕获双击手势，利用matrix放大原始小图得到模糊的大图
  2. 捕获手势，利用scrollBy 和OverScroller 来实现滑动和惯性滑动
  3. 监听滑动事件，在滑动事件中判断是否需要获取新的bitmap。如需获取则开始异步获取bitmap
  4. 将异步获取到的bitmap在ondraw中绘制到屏幕的对应区域

手势处理

手势处理可以利用GestureDetector这个类捕获

双击事件

用来放大缩小图片，进入和退出长图模式

  @Override
            public boolean onDoubleTap(MotionEvent e) {
                if (isAnim || isLoading||!canMove)
                    return true;
                if (!isScale) {
                    BigImgImageView.this.setScaleType(ScaleType.MATRIX);
                    scrollTo(0, 0);
                    RectF rect = bigImgViewUtils.getMatrixMapRect(currentMaritx);
                    float downXRatio = calcScaleScrollRatio(true, e, rect);
                    float downYRatio = calcScaleScrollRatio(false, e, rect);
                    animToScale(downXRatio, downYRatio);
                } else {
                    scrollTo(0, 0);
                    bigImgViewRealImgHelper.cancelDrawBigImg();
                    animToMatrix(currentMaritx, originMatrix);
                    destroyBigImg();
                }

                return true;
            }

计算放大倍率

 private float calcScaleScrollRatio(boolean isX, MotionEvent event, RectF rect) {
        float ratio = 0;
        if (isX) {
            if (event.getX() < (getWidth() - rect.width()) / 2)
                ratio = 0;
            else if (event.getX() > (getWidth() + rect.height()) / 2) {
                ratio = 1;
            } else {
                ratio = (event.getX() - (getWidth() - rect.width()) / 2) / rect.width();
            }
        } else {
            if (event.getY() < (getHeight() - rect.height()) / 2)
                ratio = 0;
            else if (event.getY() > (getHeight() + rect.height()) / 2) {
                ratio = 1;
            } else {
                ratio = (event.getY() - (getHeight() - rect.height()) / 2) / rect.height();
            }
        }
        return ratio;
    }

滑动事件

 @Override
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                if (isAnim || isLoading||!canMove)
                    return true;
                if (isScale) {
                    RectF rectf = bigImgViewUtils.getMatrixMapRect(currentMaritx);
                    int maxX = (int) (rectf.width() / 2 - getWidth() / 2);
                    int maxY = (int) (rectf.height() / 2 - getHeight() / 2);
                    int minX = -maxX;
                    int minY = -maxY;
                    boolean cross = false;
//避免超出滑动范围
                    if (getScrollX() + distanceX > maxX) {
                        distanceX = maxX - getScrollX();
                        cross = true;
                    }


                    if (getScrollX() + distanceX < minX) {
                        cross = true;
                        distanceX = minX - getScrollX();
                    }


                    if (getScrollY() + distanceY > maxY)
                        distanceY = maxY - getScrollY();

                    if (getScrollY() + distanceY < minY)
                        distanceY = minY - getScrollY();

                    requestIntercept(true);
        
                    BigImgImageView.this.scrollBy((int) distanceX, (int) distanceY);

                }
                return true;
            }
        });

惯性滑动

@Override
            public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                if (isAnim || isLoading||!canMove)
                    return true;
                if (isScale) {
                    requestIntercept(true);
                    RectF rectf = bigImgViewUtils.getMatrixMapRect(currentMaritx);
               
                    scroller.fling(getScrollX(), getScrollY(), -(int) velocityX, (int) -velocityY,
                            -(int) (rectf.width() / 2 - getWidth() / 2), (int) (rectf.width() / 2 - getWidth() / 2),
                            -(int) (rectf.height() / 2 - getHeight() / 2), (int) (rectf.height() / 2) - getHeight() / 2);
               
                    scrollStart = true;
                    invalidate();
                }
                return true;
            }

大图变换

这里各个地方需要注意，利用matrix放大的倍率精度是有限的，我们不要用开始计算好的倍率来处理后续业务，等matrix放大完毕后，测量matrix真正的放大倍率，再利用这个放大倍率进行后续计算

   //计算放大倍率 
    private void animToScale(final float downXRatio, final float downYRatio) {
        RectF rectF = bigImgViewUtils.getMatrixMapRect(originMatrix);
        float widthRatio = getWidth() / rectF.width();
        float heightRatio = getHeight() / rectF.height();
        float scaleRatio;
        boolean isWidthMore = widthRatio > heightRatio;
        if (widthRatio <= 1f && heightRatio <= 1f) {
            scaleRatio = maxScale;
        } else {
            scaleRatio = isWidthMore ? widthRatio : heightRatio;
        }
        if (scaleRatio < maxScale)
            scaleRatio = maxScale;

        bigImgViewRealImgHelper.needLoadRealBySize = scaleRatio > scrollMinRatio;
        if (!bigImgViewRealImgHelper.needLoadRealBySize) {
            int dx = 0;
            int dy = 0;
            dx = -(int) ((scaleRatio * rectF.width() - getWidth()) / 2 - downXRatio * scaleRatio * rectF.width() + getWidth() * downXRatio);
            dy = -(int) ((scaleRatio * rectF.height() - getHeight()) / 2 - downYRatio * scaleRatio * rectF.height() + getHeight() * downYRatio);
            scroller.startScroll(0, 0, dx, dy, 150);
        }
        playScaleAnim(downXRatio, downYRatio, scaleRatio);
    }

播放放大动画 ,并在动画结束后根据双击坐标，改变当前位置scrollX 与scrollY

 private void playScaleAnim(final float downXRatio, final float downYRatio, float scaleRatio) {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(1, scaleRatio);
        valueAnimator.setDuration(150);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                currentMaritx = new Matrix(originMatrix);
                currentMaritx.postScale((Float) animation.getAnimatedValue(), (Float) animation.getAnimatedValue(), getWidth() / 2, getHeight() / 2);
                BigImgImageView.this.setImageMatrix(currentMaritx);
            }
        });
        valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                setAnim(true);

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                setAnim(false);
                isScale = true;
                changeMode(true);
                RectF realRect = bigImgViewUtils.getMatrixMapRect(currentMaritx);

                if (bigImgViewRealImgHelper.needLoadRealBySize) {
                    int dx = 0;
                    int dy = 0;
                    dx = realRect.width() > realRect.height() ? (int) (downXRatio * (realRect.width() - getWidth())) : 0;
                    dy = realRect.height() > realRect.width() ? (int) (downYRatio * realRect.height() - getHeight()) : 0;
                    scrollTo((int) (-realRect.width() / 2 + dx + getWidth() / 2), (int) (-realRect.height() / 2 + dy + getHeight() / 2));
                }


                if (bigImgViewRealImgHelper.needToLoadRealBigImg) {
                    bigImgViewRealImgHelper.initBitmapRegion(uri);
                    bigImgViewRealImgHelper.onBigImgFlingStop(currentMaritx);
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        valueAnimator.start();
    }

加载区域图片

这里的处理要注注意，不能每次生成的区域太小。避免 BitmapRegionDecoder 频繁创建bitmap ，这里很容易导致 oom 或者过于频繁的GC造成卡顿。因为我们是在滑动的回调中处理这些业务，调用次数很频繁，所以要尽可能的避免在过程中创建对象。
同时这里我整合了几个对象

RealBitmap

包含需要绘制的bitmap 和相关区域信息

 //超长图加载区域信息
    public static class RealBitmap {
//需要绘制的图片
        public Bitmap bitmap;
//图片需要绘制的区域
        public Rect rect1;
//图片绘制的目标区域
        public RectF targetRect;
//该图片在原始图片中的区域
        private Rect calcRect;

        public RealBitmap(RealBitmap realBitmap) {
            this.bitmap = realBitmap.bitmap;
            this.rect1 = realBitmap.rect1;
            this.targetRect = realBitmap.targetRect;
            this.calcRect = realBitmap.calcRect;
        }

        private RealBitmap() {
        }

        public void recycle() {
            if (bitmap != null)
                bitmap.recycle();
        }

        public boolean isRecycled() {
            return bitmap == null || bitmap.isRecycled();
        }

        @Override
        public String toString() {
            return bitmap.getWidth() + "---" + bitmap.getHeight() + "----" + rect1.toString() + "----" + targetRect.toString();
        }
    }

RealBitmapWrapper

我们加载过程要根据滑动方向进行预加载 ，所以包装了一个之前和当前的 RealBitmap 。
预计加载的方向如下,每次多加载一屏的bitmap可以有效地的避免bitmap创建过于频繁。

  //超大图预加载
    protected enum Orientation {
        toLeft, toRight, toTop, toBottom, none
    }

    //超长图加载信息
    public class RealBitmapWrapper {
        public RealBitmap last;
        public RealBitmap current;

        private synchronized void add(RealBitmap bitmap) {
            if (current == null)
                current = bitmap;
            else {
                if (last != null)
                    last.recycle();
                last = current;
                current = bitmap;
            }
        }

        public void recycle() {
            if (last != null)
                last.recycle();
            if (current != null)
                current.recycle();
            last = null;
            current = null;
        }

        //是否包含
        public boolean contains(Rect rect) {
            if (last == null && current == null)
                return false;
            if (last != null && current != null) {
                tempRectF.set(Math.min(current.targetRect.left, last.targetRect.left),
                        Math.min(current.targetRect.top, last.targetRect.top),
                        Math.max(current.targetRect.right, last.targetRect.right),
                        Math.max(current.targetRect.bottom, last.targetRect.bottom));
                return tempRectF.contains(RectToRectF(rect));
            }
            if (current != null)
                return current.targetRect.contains(RectToRectF(rect));
            else
                return last.targetRect.contains(RectToRectF(rect));
        }

        //获取下一次加载方向
        private Orientation containsGetNext(Rect rect) {
            RectF finial;
            if (last == null && current == null)
                return Orientation.none;
            if (last != null && current != null) {
                tempRectF.set(Math.min(current.targetRect.left, last.targetRect.left),
                        Math.min(current.targetRect.top, last.targetRect.top),
                        Math.max(current.targetRect.right, last.targetRect.right),
                        Math.max(current.targetRect.bottom, last.targetRect.bottom));
                finial = tempRectF;
            } else if (current != null)
                finial = current.targetRect;
            else
                finial = last.targetRect;
            if (finial.left > rect.left)
                return toLeft;
            else if (finial.right < rect.right)
                return toRight;
            else if (finial.top < rect.top)
                return toBottom;
            else
                return toTop;
        }
    }

判断是否需要加载

 //是否需要去加载
    private boolean needToLoad() {
        if (realBitmapWrapper == null)
            return true;
        currentScrollRect.set(imageView.getScrollX(), imageView.getScrollY(), imageView.getScrollX() + imageView.getWidth(),
                imageView.getScrollY() + imageView.getHeight());
        return !realBitmapWrapper.contains(currentScrollRect);
    }

获取图片

计算当前参数，确定需要获取的图片在原图片的坐标和目标绘制坐标

  //获取清晰的真实图片
    private void getOriginBitmapRect(Orientation preloadFlag, Matrix currentMaritx) {
        tempMatrixRect.setEmpty();
        tempMatrixRect.right = imageView.getDrawable().getIntrinsicWidth();
        tempMatrixRect.bottom = imageView.getDrawable().getIntrinsicHeight();
        currentMaritx.mapRect(tempMatrixRect);

        RectF current = tempMatrixRect;
        float ratio = (float) bigImgRealWidth / current.width();
        float ratioHeight = (float) bigImgRealHeight / current.height();
        bigAsyncData.rect = calcBitmapRect(ratio, ratioHeight, bigImgRealWidth, bigImgRealHeight, current
                , preloadFlag, imageView.getScrollX(), imageView.getScrollY());
        bigAsyncData.target = calcDrawRect(ratio, ratioHeight, bigAsyncData.rect, imageView.getScrollX(), imageView.getScrollY(), preloadFlag);

        if (bigAsyncData.target.equals(currentRequestRect))
            return;
        currentRequestRect = bigAsyncData.target;

        if (asyncBigImg != null) {
            asyncBigImg.cancel(true);
        }
        asyncBigImg = new AsyncBigImg();
        asyncBigImg.execute(bigAsyncData);
    }

交由异步任务执行获取过程

 //获取大图异步放大
    private class AsyncBigImg extends AsyncTask<BigAsyncData, Object, RealBitmap> {
        private boolean isCancel = false;

        @Override
        protected RealBitmap doInBackground(BigAsyncData... params) {
            BigAsyncData bigAsyncData = params[0];
            if (bitmapRegionDecoder == null)
                return null;

            RealBitmap realBitmapT = null;
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inPreferredConfig = Bitmap.Config.RGB_565;
            Bitmap bitmap = null;
            try {
                bitmap = bitmapRegionDecoder.decodeRegion(changRotateRect(imgRotate, bigAsyncData.rect), options);
                if (imgRotate != 0) {
                    Bitmap old = bitmap;
                    bitmap = FileUntil.rotateBitmap(bitmap, imgRotate);
                    old.recycle();
                }
            } catch (Exception e) {
                e.printStackTrace();
                return null;
            }
            if (bitmap != null)
                realBitmapT = new RealBitmap();
            else
                return null;
            realBitmapT.bitmap = bitmap;
            realBitmapT.rect1 = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
            realBitmapT.targetRect = bigAsyncData.target;
            realBitmapT.calcRect = bigAsyncData.rect;
            if (isCancel) {
                realBitmapT.recycle();
                realBitmapT = null;
            }
            return realBitmapT;
        }

 @Override
        protected void onCancelled() {
            super.onCancelled();
            isCancel = true;
        }

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
        }

        @Override
        protected void onPostExecute(RealBitmap realBitmap) {
            if (realBitmap == null)
                return;
            realBitmapWrapper.add(realBitmap);
            drawRealBig = true;
            imageView.invalidate();
        }
}

图片绘制

首先我们需要一个标志位来确定是否需要绘制。另外需要一个对象来保存异步获取的绘制图片信息，方便在ondraw中调用

 //是否可以绘制大图
    public boolean drawRealBig = false;
 //原始图片信息
    public RealBitmapWrapper realBitmapWrapper = new RealBitmapWrapper();

最后再ondraw中绘制bitmap即可

canvas.drawBitmap(realBitmapWrapper.current.bitmap, realBitmapWrapper.current.rect1,
                        bigImgViewRealImgHelper.realBitmapWrapper.current.targetRect, null);

总结

这里的核心难点在于对内存的把控，这里可能要频繁的生成bitmap 注意要及时释放无用的。另外，为了避免bitmap过于频繁生成，我们加入了预加载机制，根据滑动的方向，预加载部分图片。按这套机制处理出来的超大图与微博，微信效果无异。我们来看一下最终效果图

效果图
上一篇下一篇

猜你喜欢

热点阅读