Kotlin Android 第22天，从 0 到 ML - Canvas

前言:

   今天来介绍使用Canvas 的绘图方法来创建 2D 绘图，并画出触控手势的轨迹。

大纲 :

在画布上执行的操作类型包括：

用颜色填充整个画布。
绘制形状，例如矩形、圆弧和路径，其样式与对像中定义的一样 Paint。该 Paint对象包含有关如何绘制几何图形（例如直线、矩形、椭圆和路径）的样式和颜色信息，或者例如文本的字体。
应用转换，例如平移、缩放或自定义转换。
剪辑，即将形状或路径应用到画布以定义其可见部分。

建立Canvas的View

class Day22Draw(context: Context): View(context) {
  private var extraCanvas: Canvas //Canvas定义了可以在屏幕上绘制的形状。
  private var extraBitmap: Bitmap //使用画布绘图 API绘制缓存位图

//paint 定义您绘制的每个形状的颜色、样式、字体等。
private val paint = Paint().apply {
    color = Color.WHITE // 画笔颜色
    isAntiAlias = true // 定义是否应用边缘平滑。
    isDither = true // 影响精度高於设备的颜色下采样的方式。
    style = Paint.Style.STROKE // 指定要绘制的图元是填充、描边还是两者（以相同颜色）。default: FILL
    strokeJoin = Paint.Join.ROUND // 指定线条和曲线段如何在描边路径上连接 , default: MITER
    strokeCap = Paint.Cap.ROUND // 指定描边线和路径的开始和结束方式。 default: BUTT
    strokeWidth = 10f // 以像素为单位指定笔划的宽度。 default: Hairline-width (really thin)
}

private var currentX = 0f
private var currentY = 0f

private var motionTouchEventX = 0f
private var motionTouchEventY = 0f

init{
     val width = Resources.getSystem().displayMetrics.widthPixels
    extraBitmap = Bitmap.createBitmap(width, 800, Bitmap.Config.ARGB_8888)
    extraCanvas = Canvas(extraBitmap)
    extraCanvas.drawColor(Color.BLACK)
}

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    
    canvas.drawBitmap(extraBitmap, 0f, 0f, null)
}

//触控手势处理
override fun onTouchEvent(event: MotionEvent): Boolean {
    motionTouchEventX = event.x
    motionTouchEventY = event.y

    when (event.action) {
        MotionEvent.ACTION_DOWN -> touchStart()
        MotionEvent.ACTION_MOVE -> touchMove()
    }
    return true
}

private fun touchStart() {
    currentX = motionTouchEventX
    currentY = motionTouchEventY
}

private fun touchMove() {
    val stopX = motionTouchEventX
    val stopY = motionTouchEventY
    extraCanvas.drawLine(currentX,currentY,stopX,stopY,paint)
    currentX = motionTouchEventX
    currentY = motionTouchEventY
    
    invalidate()
}

}

Activity 汇入view

class Day22Activity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    var myDay22Draw = Day22Draw(this)
    setContentView(myDay22Draw)
  }
}

执行结果: