音視頻:使用三種方式繪制圖片

由于視頻的渲染,本質(zhì)上就是顯示一張一張的圖片跨嘉,所以學(xué)習(xí)第一步就是學(xué)習(xí)顯示圖片。

這次我們使用三種不同的方式來(lái)顯示一張圖片。

ImageView

使用 ImageView 是最簡(jiǎn)單也是最常用的方式了陷猫。

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

SurfaceView

我們知道View是通過(guò)刷新來(lái)重繪視圖,系統(tǒng)通過(guò)發(fā)出 VSSYNC 信號(hào)來(lái)進(jìn)行屏幕的重繪的妖,刷新的時(shí)間間隔是 16 ms绣檬,如果我們可以在 16 ms 以內(nèi)將繪制工作完成,則沒(méi)有任何問(wèn)題嫂粟,如果我們繪制過(guò)程邏輯很復(fù)雜娇未,而且我們的界面更新還非常頻繁,這時(shí)候就會(huì)造成界面的卡頓星虹,影響用戶體驗(yàn)零抬。為此Android提供了 SurfaceView 來(lái)解決這一問(wèn)題镊讼。

SurfaceView 和 View 有什么區(qū)別?

  1. View 適用于被動(dòng)更新的場(chǎng)景平夜,而 SurfaceView 適用于主動(dòng)更新的情況蝶棋,比如頻繁的刷新界面。(具體原因見(jiàn)下條)
  2. View 在主線程中對(duì)頁(yè)面進(jìn)行刷新忽妒,而 SurfaceView 則開(kāi)啟一個(gè)子線程來(lái)對(duì)頁(yè)面進(jìn)行刷新玩裙。(最本質(zhì)的區(qū)別)
  3. View 在繪圖的時(shí)候沒(méi)有雙緩沖機(jī)制,而 SurfaceView 在底層中實(shí)現(xiàn)了雙緩沖機(jī)制段直。

代碼

最后肯定要上代碼的 [狗頭]

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

其實(shí)自定義 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,第一個(gè)任務(wù)算是完成了~代碼更新在 GitHub 倉(cāng)庫(kù)中鸯檬。新年新氣象决侈,下個(gè)任務(wù)見(jiàn)~


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市京闰,隨后出現(xiàn)的幾起案子颜及,更是在濱河造成了極大的恐慌,老刑警劉巖蹂楣,帶你破解...
    沈念sama閱讀 218,122評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俏站,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡痊土,警方通過(guò)查閱死者的電腦和手機(jī)肄扎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)赁酝,“玉大人犯祠,你說(shuō)我怎么就攤上這事∽么簦” “怎么了衡载?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,491評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)隙袁。 經(jīng)常有香客問(wèn)我痰娱,道長(zhǎng),這世上最難降的妖魔是什么菩收? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,636評(píng)論 1 293
  • 正文 為了忘掉前任梨睁,我火速辦了婚禮,結(jié)果婚禮上娜饵,老公的妹妹穿的比我還像新娘坡贺。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布遍坟。 她就那樣靜靜地躺著拳亿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪政鼠。 梳的紋絲不亂的頭發(fā)上风瘦,一...
    開(kāi)封第一講書(shū)人閱讀 51,541評(píng)論 1 305
  • 那天队魏,我揣著相機(jī)與錄音公般,去河邊找鬼。 笑死胡桨,一個(gè)胖子當(dāng)著我的面吹牛官帘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播昧谊,決...
    沈念sama閱讀 40,292評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼刽虹,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了呢诬?” 一聲冷哼從身側(cè)響起涌哲,我...
    開(kāi)封第一講書(shū)人閱讀 39,211評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尚镰,沒(méi)想到半個(gè)月后阀圾,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,655評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡狗唉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評(píng)論 3 336
  • 正文 我和宋清朗相戀三年初烘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片分俯。...
    茶點(diǎn)故事閱讀 39,965評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡肾筐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出缸剪,到底是詐尸還是另有隱情吗铐,我是刑警寧澤,帶...
    沈念sama閱讀 35,684評(píng)論 5 347
  • 正文 年R本政府宣布杏节,位于F島的核電站唬渗,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏拢锹。R本人自食惡果不足惜谣妻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望卒稳。 院中可真熱鬧蹋半,春花似錦、人聲如沸充坑。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,894評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至辈灼,卻和暖如春份企,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背巡莹。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,012評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工司志, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人降宅。 一個(gè)月前我還...
    沈念sama閱讀 48,126評(píng)論 3 370
  • 正文 我出身青樓骂远,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親腰根。 傳聞我的和親對(duì)象是個(gè)殘疾皇子激才,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容