關(guān)于Android的超長(zhǎng)圖處理磷籍，可以很容易的找到解決方案适荣，即用BitmapRegionDecoder來(lái)分區(qū)域生成bitmap來(lái)實(shí)現(xiàn)现柠，但是在實(shí)踐過(guò)程中發(fā)現(xiàn)，各中細(xì)節(jié)并不是那么容易弛矛，下面分享一下其中的技術(shù)難點(diǎn)够吩。
實(shí)現(xiàn)目標(biāo)
類似于微博和微信，對(duì)于超長(zhǎng)圖的處理丈氓。
- 雙擊進(jìn)入超長(zhǎng)圖模式周循，超長(zhǎng)圖自動(dòng)占滿全屏方便閱讀
- 滑動(dòng)到哪里，哪個(gè)區(qū)域變得清晰
- 帶慣性的流暢滑動(dòng)
實(shí)現(xiàn)思路
- 捕獲雙擊手勢(shì)万俗，利用
matrix放大原始小圖得到模糊的大圖 - 捕獲手勢(shì)湾笛，利用
scrollBy和OverScroller來(lái)實(shí)現(xiàn)滑動(dòng)和慣性滑動(dòng) - 監(jiān)聽(tīng)滑動(dòng)事件，在滑動(dòng)事件中判斷是否需要獲取新的bitmap该编。如需獲取則開(kāi)始異步獲取
bitmap - 將異步獲取到的
bitmap在ondraw中繪制到屏幕的對(duì)應(yīng)區(qū)域
手勢(shì)處理
手勢(shì)處理可以利用GestureDetector這個(gè)類捕獲
雙擊事件
用來(lái)放大縮小圖片迄本，進(jìn)入和退出長(zhǎng)圖模式
@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;
}
計(jì)算放大倍率
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;
}
滑動(dòng)事件
@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;
//避免超出滑動(dòng)范圍
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;
}
});
慣性滑動(dòng)
@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;
}
大圖變換
這里各個(gè)地方需要注意，利用matrix放大的倍率精度是有限的课竣，我們不要用開(kāi)始計(jì)算好的倍率來(lái)處理后續(xù)業(yè)務(wù)嘉赎，等matrix放大完畢后，測(cè)量matrix真正的放大倍率于樟，再利用這個(gè)放大倍率進(jìn)行后續(xù)計(jì)算
//計(jì)算放大倍率
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);
}
播放放大動(dòng)畫 ,并在動(dòng)畫結(jié)束后根據(jù)雙擊坐標(biāo)公条，改變當(dāng)前位置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();
}
加載區(qū)域圖片
這里的處理要注注意，不能每次生成的區(qū)域太小迂曲。避免 BitmapRegionDecoder 頻繁創(chuàng)建bitmap 靶橱，這里很容易導(dǎo)致 oom 或者過(guò)于頻繁的GC造成卡頓。因?yàn)槲覀兪窃诨瑒?dòng)的回調(diào)中處理這些業(yè)務(wù)路捧，調(diào)用次數(shù)很頻繁关霸，所以要盡可能的避免在過(guò)程中創(chuàng)建對(duì)象。
同時(shí)這里我整合了幾個(gè)對(duì)象
RealBitmap
包含需要繪制的bitmap 和相關(guān)區(qū)域信息
//超長(zhǎng)圖加載區(qū)域信息
public static class RealBitmap {
//需要繪制的圖片
public Bitmap bitmap;
//圖片需要繪制的區(qū)域
public Rect rect1;
//圖片繪制的目標(biāo)區(qū)域
public RectF targetRect;
//該圖片在原始圖片中的區(qū)域
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
我們加載過(guò)程要根據(jù)滑動(dòng)方向進(jìn)行預(yù)加載 杰扫，所以包裝了一個(gè)之前和當(dāng)前的 RealBitmap 队寇。
預(yù)計(jì)加載的方向如下,每次多加載一屏的bitmap可以有效地的避免bitmap創(chuàng)建過(guò)于頻繁。
//超大圖預(yù)加載
protected enum Orientation {
toLeft, toRight, toTop, toBottom, none
}
//超長(zhǎng)圖加載信息
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);
}
獲取圖片
計(jì)算當(dāng)前參數(shù)章姓，確定需要獲取的圖片在原圖片的坐標(biāo)和目標(biāo)繪制坐標(biāo)
//獲取清晰的真實(shí)圖片
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);
}
交由異步任務(wù)執(zhí)行獲取過(guò)程
//獲取大圖異步放大
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();
}
}
圖片繪制
首先我們需要一個(gè)標(biāo)志位來(lái)確定是否需要繪制佳遣。另外需要一個(gè)對(duì)象來(lái)保存異步獲取的繪制圖片信息，方便在ondraw中調(diào)用
//是否可以繪制大圖
public boolean drawRealBig = false;
//原始圖片信息
public RealBitmapWrapper realBitmapWrapper = new RealBitmapWrapper();
最后再ondraw中繪制bitmap即可
canvas.drawBitmap(realBitmapWrapper.current.bitmap, realBitmapWrapper.current.rect1,
bigImgViewRealImgHelper.realBitmapWrapper.current.targetRect, null);
總結(jié)
這里的核心難點(diǎn)在于對(duì)內(nèi)存的把控凡伊，這里可能要頻繁的生成bitmap 注意要及時(shí)釋放無(wú)用的零渐。另外，為了避免bitmap過(guò)于頻繁生成系忙，我們加入了預(yù)加載機(jī)制诵盼，根據(jù)滑動(dòng)的方向，預(yù)加載部分圖片。按這套機(jī)制處理出來(lái)的超大圖與微博拦耐，微信效果無(wú)異耕腾。我們來(lái)看一下最終效果圖
效果圖
