自定义View--＞仪表盘

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、先画带锯齿的弧形

代码和注释如下：

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import com.lbj23.recustomview.dp

val DASH_WIDTH = 2.dp
val DASH_HEIGHT = 5.dp
const val OPEN_ANGLE = 120f

class DashBoardView(context: Context?, attrs: AttributeSet?) : View(context, attrs) {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val path = Path()
    //存放画出小锯齿的那个小矩形
    private val dash = Path()
    //给paint添加画路径时的效果
    private lateinit var dashEffect: PathDashPathEffect

    init {
        //画笔为线条
        paint.apply {
            style = Paint.Style.STROKE
            strokeWidth = 3.dp
        }
        //锯齿为一个宽2dp,高5dp的矩形
        dash.addRect(0f, 0f, DASH_WIDTH, DASH_HEIGHT, Path.Direction.CW)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        //每次画都以View的中心为基准，所以每次"onSizeChanged",都要重置后去再添加一遍弧形
        path.reset()
        path.addArc(
            width / 2f - 150.dp,
            height / 2f - 150.dp,
            width / 2f + 150.dp,
            height / 2f + 150.dp,
            90 + OPEN_ANGLE / 2f,
            360 - OPEN_ANGLE
        )
        //测量一下这段弧长
        val pathMeasure = PathMeasure(path, false)
        dashEffect = PathDashPathEffect(
            dash,
            (pathMeasure.length - DASH_WIDTH) / 20,
            0f,
            PathDashPathEffect.Style.MORPH
        )
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.apply {
            //曲线画一遍弧
            drawPath(
                path, paint
            )
            //锯齿画一遍弧
            paint.pathEffect = dashEffect
            drawPath(
                path, paint
            )
            paint.pathEffect = null
        }
    }
}

重要点

1.PathDashPathEffect

dashEffect画一遍弧后的效果

曲线画一遍弧的效果

两者叠加在一起后：

所以最终效果是画了两遍才产生的，PathDashPathEffect，只是画笔在画线时的一种效果。

2. 刻度和间隔

如果计算间隔直接用弧长除以20，最后一个刻度会没有地方画，如下面的图所示最后一个刻度超出了弧长，那么只会有20个刻度，19个间隔

 (pathMeasure.length) / 20

压缩前面的刻度，把最后一个刻度放进弧中，所以要- DASH_WIDTH

二、画指针

代码如下：

 drawLine(
            width / 2f,
            height / 2f,
            width / 2f + LENGTH * cos(Math.toRadians(150 + (360 - OPEN_ANGLE) * scale / 20.0)).toFloat(),
            height / 2f + LENGTH * sin(Math.toRadians(150 + (360 - OPEN_ANGLE) * scale / 20.0)).toFloat(),
            paint
)

在指针长度固定的情况下算出从屏幕中心到箭头的位置
scale就是刻度值，从0到20，一旦被修改就要马上重绘

    private var scale = 10
        set(value) {
            field = value
            invalidate()
        }

---

总结

就是一些简单画布工具的使用，主要是指针和刻度的对齐关系。