使用三种方式绘制图片

in Program with 0 comment
由于视频的渲染,本质上就是显示一张一张的图片,所以学习第一步就是学习显示图片。

这次我们使用三种不同的方式来显示一张图片。

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 仓库中。新年新气象,下个任务见~

Responses