先放效果:
圖片如果不顯示：點(diǎn)擊這里
前言
首先分析一下需求：將一個(gè)圖片顯示在屏幕上雏赦，并能夠?qū)ζ浞糯蠡蛘咂揭啤?br> 用 canvas 畫(huà) bitmap 主要有這么幾個(gè)方法。
void drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
void drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)
第二個(gè)方法只能指定繪制的起點(diǎn)，也就是說(shuō)只能實(shí)現(xiàn)平移讲坎，所以舍棄。
第一御蒲、三個(gè)方法都支持將bitmap變換后再顯示在屏幕上衣赶。區(qū)別是一個(gè)是使用矩形，一個(gè)是使用矩陣厚满。
矩形封裝的方法很有限府瞄，所以我采用了矩陣的方式實(shí)現(xiàn)變換（平移、放大碘箍、縮凶窆荨）
矩陣 (matrix)
先用一個(gè)圖來(lái)說(shuō)明矩陣的用途...
假設(shè)A是圖片，B是手機(jī)屏幕丰榴，有一道光照在A上货邓，然后A在手機(jī)上有個(gè)投影A'。假設(shè)我們只能看到手機(jī)屏幕上的內(nèi)容四濒，那么如果光源的位置發(fā)生改變换况，那么A'在屏幕上的位置和大小也可能會(huì)隨之改變。
而矩陣在這里就充當(dāng)這光源的作用盗蟆。
矩陣提供這么幾類(lèi)方法
- tranlate： 移動(dòng)
- scale：縮放
- rotate：旋轉(zhuǎn)
- skew：傾斜
所以我們可以定義一個(gè)類(lèi)變量 matrixDraw 用來(lái)繪制 bitmap
val matrixDraw = Matrix()
對(duì)象池
因?yàn)閳D片在變換的時(shí)候需要用到不少矩形和矩陣戈二，為了防止大量創(chuàng)建這些對(duì)象產(chǎn)生內(nèi)存抖動(dòng)，所以使用對(duì)象池進(jìn)行緩存喳资，每次拿一個(gè)使用后就存回去
abstract class ObjectPool<T>(capacity: Int = 16) {
val objects: Queue<T>
var size = capacity
init {
objects = LinkedList()
}
/**
* get an object from pool , must restore it after using
*/
fun get(): T {
if (objects.size == 0) {
return generateAnObject()
}
return reset(objects.poll())
}
fun restore(vararg t: T) {
for (e in t) {
if (objects.size < size) {
objects.offer(e)
}
}
}
protected abstract fun reset(t: T): T
protected abstract fun generateAnObject(): T
}
實(shí)現(xiàn)滑動(dòng)
使用 GestureDetector 來(lái)處理滑動(dòng)操作觉吭，向下和向右滑動(dòng)時(shí)onScroll方法傳過(guò)來(lái)的 distanceX和distanceY都是負(fù)數(shù)。
使用方法：
? 重寫(xiě) onTouchEvent然后調(diào)用 gestureDetector.onTouchEvent(event)
val gestureDetector = GestureDetector(context, object : GestureDetector.SimpleOnGestureListener() {
override fun onScroll(e1: MotionEvent, e2: MotionEvent, distanceX: Float, distanceY: Float): Boolean {
log("onScroll $distanceX,$distanceY")
moveImageBy(-distanceX, -distanceY)
return true
}
})
moveImageBy()的方法很簡(jiǎn)單仆邓，直接對(duì) matrixDraw 進(jìn)行平移鲜滩，然后刷新view
fun moveImageBy(dx: Float, dy: Float) {
matrixDraw.postTranslate(dx, dy)
invalidate()
}
override fun onDraw(canvas: Canvas) = bitmap?.let {
canvas.drawBitmap(it, matrixDraw, paint)
} ?: Unit
滑動(dòng)處理很簡(jiǎn)單，到這里就結(jié)束了节值。
實(shí)現(xiàn)縮放
縮放的手勢(shì)監(jiān)聽(tīng)和滑動(dòng)監(jiān)聽(tīng)一樣徙硅，寫(xiě)一個(gè)ScaleGestureDetector然后在 onTouchEvent調(diào)用相關(guān)方法。
val scaleGestureDetector = ScaleGestureDetector(context, object : ScaleGestureDetector.SimpleOnScaleGestureListener() {
private var scaleFactorOld = 1f //use to remember the last scale factor
override fun onScaleBegin(detector: ScaleGestureDetector): Boolean {
focusPoint.set(detector.focusX, detector.focusY)
val rawPosition = focusPoint.getRawPosition()
if (!rawPosition.isInBitmap()) {
log(" $rawPosition is not in bitmap")
focusPoint.set(1f, 1f)
return false
}
scaleFactorOld = this@RegionImageView.matrixDraw.getScale()
log("onDraw : onScaleBegin .....--------------------")
return true
}
override fun onScale(detector: ScaleGestureDetector): Boolean {
scaleImage(scaleFactorOld * detector.scaleFactor, focusPoint)
return false
}
})
但在縮放開(kāi)始時(shí)搞疗，我們需要記錄一些東西闷游。
1. 縮放的焦點(diǎn)：通過(guò)detector.focusX和detector.focusY我們能知道屏幕上的手機(jī)縮放的焦點(diǎn)，而我們對(duì)圖片進(jìn)行縮放，所以必須知道改點(diǎn)對(duì)應(yīng)在bitmap中的坐標(biāo)脐往。
2. 當(dāng)前縮放的比例：由于detector.scaleFactor記錄的是這一次整個(gè)過(guò)程縮放的比例休吠，所以我們需要記錄下上一次已經(jīng)縮放的比例。
矩陣中public void mapPoints(float[] dst, float[] src)這個(gè)方法可以求出點(diǎn)src通過(guò)此矩陣變換后的坐標(biāo)业簿。所以我們將matrixDraw翻轉(zhuǎn)后再調(diào)用此方法瘤礁，便可以通過(guò)變換后的坐標(biāo)求出原坐標(biāo)。
/**
* use screen point to find this point of bitmap
*/
private fun PointF.getRawPosition(): PointF = PointF(-1f, -1f).apply {
matrixDraw.invert { invert ->
val dest = FloatArray(2)
invert.mapPoints(dest, floatArrayOf(this@getRawPosition.x, this@getRawPosition.y))
x = dest[0]
y = dest[1]
}
}
另外還有一個(gè)是判斷焦點(diǎn)是否在圖片內(nèi)梅尤，如果不在圖片內(nèi)那就直接返回柜思。
private fun PointF.isInBitmap() = x in 0..bitmapWidth && y in 0..bitmapHeight
開(kāi)始縮放圖片： 通過(guò)postScale來(lái)實(shí)現(xiàn)圖片的放大和縮小。由于不管是放大還是縮小還是平移巷燥，都是從當(dāng)前狀態(tài)為基礎(chǔ)進(jìn)行操作的赡盘。比如假設(shè)此時(shí)已經(jīng)對(duì)原圖片放大了兩倍了，那么再使用此方法放大兩倍缰揪，就將以四倍進(jìn)行顯示陨享。
/**
* @param scale : the scale factor of the picture
* @param focus : the point of scale
*/
fun scaleImage(scale: Float, focus: PointF) {
log("scaleImage -- focus: $focus , scale: $scale")
focusPoint.set(focus)
matrixDraw.apply {
//apply scale
val oldScale = getScale()
postScale(scale / oldScale, scale / oldScale, focus.x, focus.y)
}
invalidate()
}
其中getScale就是獲取當(dāng)前矩陣的縮放比例，實(shí)現(xiàn)如下：
private fun Matrix.getScale(): Float {
val values = FloatArray(9)
this.getValues(values)
return values[0]
}
此時(shí)我們就既能平移钝腺，也能放大縮小圖片了抛姑。
顯示大圖片的顯示
當(dāng)一張圖片非常非常大時(shí)，若想放大圖片查看細(xì)節(jié)艳狐，肯定就要加載原圖定硝。但是圖片又非常大，全部加載進(jìn)來(lái)肯定就直接OOM了毫目， BitmapRegionDecoder提供了一個(gè)方法蔬啡，能夠加載一部分圖片。
public Bitmap decodeRegion(Rect rect, BitmapFactory.Options options)
傳入的矩形rect就是我們要加載圖片的區(qū)域镀虐。
首先我們需要繪制一個(gè)經(jīng)過(guò)縮放的圖片在屏幕上箱蟆，然后再在需要顯示高清圖片時(shí)再加載高清圖到內(nèi)存中。
為了不引起圖片錯(cuò)位(原來(lái)有一個(gè)縮放后的 bitmap 粉私，現(xiàn)在又在上面疊加一個(gè)高清的bitmap)，所以必須將屏幕上顯示的區(qū)域在原圖中計(jì)算出來(lái)近零。就像這樣...
右上角的綠色方框就是當(dāng)前屏幕顯示的區(qū)域诺核。
那怎么計(jì)算呢？有兩種方法久信，兩種方法都差不多窖杀，所以只介紹一種
先得到一個(gè)矩形變量
rectScreen，它左上右下分別為0裙士，0入客，屏幕寬，屏幕高反轉(zhuǎn)矩陣
matrixDraw然后通過(guò)mapRect方法獲取屏幕在原圖上的位置，得到RectImage因?yàn)?code>RectImage有可能會(huì)超出原圖的區(qū)域桌硫，所以再將
RectImage與bitmap的矩形相交夭咬，得到真實(shí)顯示區(qū)域。
代碼就不貼了铆隘，因?yàn)橛悬c(diǎn)多卓舵，可以上Github RegionImageView 查看。
后記
所有的代碼都在這里AndroidExamples膀钠。
另外當(dāng)前的實(shí)現(xiàn)非常簡(jiǎn)陋掏湾，很多問(wèn)題還需要解決，
當(dāng)然過(guò)程中也參考了不少別人的源碼
