Canvas 對(duì)繪制的輔助
Canvas 對(duì)繪制的輔助——范圍裁切和幾何變換
1 范圍裁切
范圍裁切有兩個(gè)方法： clipRect() 和 clipPath()。裁切方法之后的繪制代碼，都會(huì)被限制在裁切范圍內(nèi)。
1.1 clipRect()
canvas.save()
canvas.translate(mDefaultWidth / 2f, mDefaultHeight / 2f)
val rectF = RectF(-100f, -100f, 200f, 100f)
canvas.clipRect(rectF)
canvas.drawBitmap(bitmap, -mDefaultWidth / 2f, -mDefaultHeight / 2f, mPaint)
canvas.restore()
1.2 clipPath()
canvas.save()
canvas.translate(mDefaultWidth / 2f, mDefaultHeight / 2f)
val path = Path()
path.addCircle(0f, 0f, 100f, Path.Direction.CW)
canvas.clipPath(path)
canvas.drawBitmap(bitmap, -mDefaultWidth / 2f, -mDefaultHeight / 2f, mPaint)
canvas.restore()
2 幾何變換
幾何變換的使用大概分為三類：
- 使用 Canvas 來(lái)做常見(jiàn)的二維變換；
- 使用 Matrix 來(lái)做常見(jiàn)和不常見(jiàn)的二維變換；
- 使用 Camera 來(lái)做三維變換。
2.1 使用 Canvas 來(lái)做常見(jiàn)的二維變換:
2.1.1 Canvas.translate(float dx, float dy) 平移
參數(shù)里的 dx 和 dy 表示橫向和縱向的位移。
canvas.save()
canvas.translate(200, 0)
canvas.restore()`
2.1.2 Canvas.rotate(float degrees, float px, float py) 旋轉(zhuǎn):
參數(shù)里的 degrees 是旋轉(zhuǎn)角度，單位是度（也就是一周有 360° 的那個(gè)單位），方向是順時(shí)針為正向； px 和 py 是軸心的位置。
canvas.save()
canvas.rotate(100, centerX, centerY)
canvas.restore()
2.1.3 Canvas.scale(float sx, float sy, float px, float py) 放縮:
參數(shù)里的 sx sy 是橫向和縱向的放縮倍數(shù)； px py 是放縮的軸心。
canvas.save()
canvas.scale(1.5f, 1.5f, dx + mWidth / 2, dy + mHeight / 2)
canvas.restore()
2.1.4 skew(float sx, float sy) 錯(cuò)切:
參數(shù)里的 sx 和 sy 是 x 方向和 y 方向的錯(cuò)切系數(shù)。
canvas.save()
canvas.skew(0.5, 0.6f)
canvas.restore()
2.2 使用 Matrix 來(lái)做變換
Matrix 做常見(jiàn)變換的方式：
創(chuàng)建 Matrix 對(duì)象:
調(diào)用 Matrix 的 pre/postTranslate/Rotate/Scale/Skew() 方法來(lái)設(shè)置幾何變換；
-
使用 Canvas.setMatrix(matrix) 或 Canvas.concat(matrix) 來(lái)把幾何變換應(yīng)用到 Canvas。
val matrix = Matrix() matrix.reset() matrix.postTranslate(dx,dy) matrix.postRotate(degress) canvas.save() canvas.concat(matrix) canvas.drawBitmap(bitmap, x, y, paint) canvas.restore()
把 Matrix 應(yīng)用到 Canvas 有兩個(gè)方法：
- Canvas.setMatrix(matrix) 和 Canvas.concat(matrix)。
- Canvas.setMatrix(matrix)：用 Matrix 直接替換 Canvas 當(dāng)前的變換矩陣，即拋棄 Canvas 當(dāng)前的變換，改用 Matrix 的變換（不同的手機(jī)系統(tǒng)中 setMatrix(matrix) 的行為可能不一致，所以還是盡量用 concat(matrix) 吧）；
- Canvas.concat(matrix)：用 Canvas 當(dāng)前的變換矩陣和 Matrix 相乘，即基于 Canvas 當(dāng)前的變換，疊加上 Matrix 中的變換。
2.2.2 使用 Matrix 來(lái)做自定義變換:
Matrix 的自定義變換使用的是 setPolyToPoly() 方法。
2.2.2.1 Matrix.setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount)
參數(shù)里，src 和 dst 是源點(diǎn)集合目標(biāo)點(diǎn)集；srcIndex 和 dstIndex 是第一個(gè)點(diǎn)的偏移；pointCount 是采集的點(diǎn)的個(gè)數(shù)（個(gè)數(shù)不能大于 4，因?yàn)榇笥?4 個(gè)點(diǎn)就無(wú)法計(jì)算變換了）。
用點(diǎn)對(duì)點(diǎn)映射的方式設(shè)置變換.
setPolyToPoly() 的作用是通過(guò)多點(diǎn)的映射的方式來(lái)直接設(shè)置變換。多點(diǎn)映射就是把指定的點(diǎn)移動(dòng)到給出的位置，從而發(fā)生形變。例如：(0, 0) -> (500, 500) 表示把 (0, 0) 位置的像素移動(dòng)到 (500, 500) 的位置，這個(gè)是單點(diǎn)的映射，單點(diǎn)映射可以實(shí)現(xiàn)平移。而多點(diǎn)的映射，就可以讓繪制內(nèi)容任意地扭曲。
val matrix = Matrix()
val pointsSrc = arrayOf(left, top, right, top, left, bottom, right, bottom)//對(duì)應(yīng)四個(gè)點(diǎn)
val pointsDst = arrayOf(left - 10, top + 50, right + 120, top - 90, left + 20, bottom + 30, right + 20, bottom + 60)
matrix.reset()
matrix.setPolyToPoly(pointsSrc, 0, pointsDst, 0, 4);
canvas.save()
canvas.concat(matrix)
canvas.drawBitmap(bitmap, dx, dy, paint)
canvas.restore()
2.3 使用 Camera 來(lái)做三維變換
Camera 的三維變換有三類：旋轉(zhuǎn)、平移、移動(dòng)相機(jī)。
2.3.1 Camera.rotate*() 三維旋轉(zhuǎn):
Camera.rotate*() 一共有四個(gè)方法： rotateX(deg) rotateY(deg) rotateZ(deg) rotate(x, y, z),注：Camera 和 Canvas 一樣也需要保存和恢復(fù)狀態(tài)才能正常繪制，不然在界面刷新之后繪制就會(huì)出現(xiàn)問(wèn)題.
2.3.2 Camera.translate(float x, float y, float z) 移動(dòng):
2.3.3 Camera.setLocation(x, y, z) 設(shè)置虛擬相機(jī)的位置:
setLocation() 方法來(lái)把相機(jī)往后移動(dòng)，就可以修復(fù)這種問(wèn)題。
camera.setLocation(0, 0, newZ);Camera.setLocation(x, y, z) 的 x 和 y 參數(shù)一般不會(huì)改變，直接填 0 就好。
