自定义View-->仪表盘

文章目录

  • 前言
  • 一、先画带锯齿的弧形
      • 代码和注释如下:
      • 重要点
        • 1.PathDashPathEffect
        • 2. 刻度和间隔
  • 二、画指针
  • 总结


前言

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


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

一、先画带锯齿的弧形

代码和注释如下:

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画一遍弧后的效果
自定义View-->仪表盘_第1张图片
曲线画一遍弧的效果
自定义View-->仪表盘_第2张图片
两者叠加在一起后:
自定义View-->仪表盘_第3张图片
所以最终效果是画了两遍才产生的,PathDashPathEffect,只是画笔在画线时的一种效果。

2. 刻度和间隔

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

 (pathMeasure.length) / 20

自定义View-->仪表盘_第4张图片

压缩前面的刻度,把最后一个刻度放进弧中,所以要- 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
)

自定义View-->仪表盘_第5张图片
在指针长度固定的情况下算出从屏幕中心到箭头的位置
scale就是刻度值,从0到20,一旦被修改就要马上重绘

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

总结

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

你可能感兴趣的:(自定义控件,android)