音視頻：使用三種方式繪製圖片

因爲視頻的渲染，本質上就是顯示一張一張的圖片，因此學習第一步就是學習顯示圖片。

此次咱們使用三種不一樣的方式來顯示一張圖片。

ImageView

使用 ImageView 是最簡單也是最經常使用的方式了。

context?.let {
  	image.setImageBitmap(decodeStream(it.assets.open("images/test_image.jpeg")))
}
複製代碼

SurfaceView

咱們知道View是經過刷新來重繪視圖，系統經過發出 VSSYNC 信號來進行屏幕的重繪，刷新的時間間隔是 16 ms，若是咱們能夠在 16 ms 之內將繪製工做完成，則沒有任何問題，若是咱們繪製過程邏輯很複雜，並且咱們的界面更新還很是頻繁，這時候就會形成界面的卡頓，影響用戶體驗。爲此Android提供了 SurfaceView 來解決這一問題。

SurfaceView 和 View 有什麼區別？

1. View 適用於被動更新的場景，而 SurfaceView 適用於主動更新的狀況，好比頻繁的刷新界面。（具體緣由見下條）
2. View 在主線程中對頁面進行刷新，而 SurfaceView 則開啓一個子線程來對頁面進行刷新。（最本質的區別）
3. View 在繪圖的時候沒有雙緩衝機制，而 SurfaceView 在底層中實現了雙緩衝機制。

代碼

最後確定要上代碼的 [狗頭]

surfaceView.holder.addCallback(object : SurfaceHolder.Callback {
    override fun surfaceCreated(holder: SurfaceHolder?) {
        holder?.let {
            Thread {
                val canvas = it.lockCanvas()
                val bitmap =
                    decodeStream(context?.assets?.open("images/test_image.jpeg"))
                val bitmapW = bitmap.width
                val bitmapH = bitmap.height
                val src = Rect(0, 0, bitmapW, bitmapH)
                val dst = if (bitmapW > bitmapH) {
                    Rect(
                        0,
                        0,
                        surfaceView.width,
                        (surfaceView.width * (bitmapH.toFloat() / bitmapW)).toInt()
                    )

                } else {
                    Rect(
                        0,
                        0,
                        surfaceView.height * (bitmapW / bitmapH),
                        surfaceView.height
                    )
                }
                canvas.drawColor(Color.parseColor("#ffffff"))
                canvas.drawBitmap(
                    bitmap,
                    src,
                    dst,
                    Paint()
                )
                it.unlockCanvasAndPost(canvas)
            }.start()

        }
    }

    override fun surfaceChanged( holder: SurfaceHolder?, format: Int, width: Int, height: Int ) {
    }

    override fun surfaceDestroyed(holder: SurfaceHolder?) {
    }

})
複製代碼

自定義 View

其實自定義 View 和 SurfaceView 差很少，直接看代碼：

class CustomImageView : View {
    constructor(context: Context?) : super(context) {}
    constructor(context: Context?, attrs: AttributeSet?) : super(
        context,
        attrs
    )
    
    constructor(
        context: Context?,
        attrs: AttributeSet?,
        defStyleAttr: Int
    ) : super(context, attrs, defStyleAttr)

    constructor(
        context: Context?,
        attrs: AttributeSet?,
        defStyleAttr: Int,
        defStyleRes: Int
    ) : super(context, attrs, defStyleAttr, defStyleRes)

    private val bitmap: Bitmap =
        BitmapFactory.decodeStream(context?.assets?.open("images/test_image.jpeg"))

    private val src = Rect()
    private val dst = Rect()
    private val paint = Paint()
    
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        val bitmapW = bitmap.width
        val bitmapH = bitmap.height
        src.set(0, 0, bitmapW, bitmapH)
        if (bitmapW > bitmapH) {
            dst.set(
                0,
                0,
                this.width,
                (this.width * (bitmapH.toFloat() / bitmapW)).toInt()
            )

        } else {
            dst.set(
                0,
                0,
                this.height * (bitmapW / bitmapH),
                this.height
            )
        }
        canvas?.drawBitmap(bitmap, src, dst, paint)
    }
}
複製代碼

最後

OK，第一個任務算是完成了～代碼更新在 GitHub 倉庫中。新年新氣象，下個任務見～

---

• GitHub 倉庫: github.com/T-Oner/Medi… 最新更新請關注微信公衆號