美文网首页
2022-07-25 简单绘制扇形进度条

2022-07-25 简单绘制扇形进度条

作者: 兣甅 | 来源:发表于2022-07-25 22:19 被阅读0次

1.效果图如下(外圈效果):

image.png

2.源代码如下:

import android.content.Context
import android.graphics.*
import android.text.TextPaint
import android.util.AttributeSet
import android.view.View
import com.rdc.module_member.ext.dp2px
class RoundLevelView @kotlin.jvm.JvmOverloads constructor(
  context: Context,
  attrs: AttributeSet? = null,
  defStyleAttr: Int = 0,
  defStyleRes: Int = 0
) : View(context, attrs, defStyleAttr, defStyleRes) {
  //<editor-fold defaultstate="collapsed" desc="变量">
  //文字画笔
  private var mPaint = TextPaint(Paint.ANTI_ALIAS_FLAG) //抗锯齿

  //背景色
  private val mNormalColor = Color.parseColor("#999999")

  //进度颜色
  private val mProgressColor = Color.parseColor("#C62430")

  //最高等级
  private var mMaxLevel = 10

  //当前等级
  private var mCurrentLevel = 0
  //</editor-fold>

  //<editor-fold defaultstate="collapsed" desc="初始化">
  init {
    mPaint.strokeWidth = 1.dp2px() * 1f
    mPaint.style = Paint.Style.STROKE
    mPaint.strokeCap = Paint.Cap.ROUND//作用于圆环结尾
  }
  //</editor-fold>

  //<editor-fold defaultstate="collapsed" desc="绘制">
  private var mRectF = RectF()
  override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    if (width <= 0 || height <= 0) return
    canvas?.let { c ->
      val radius = width.coerceAtMost(height) / 2f - mPaint.strokeWidth / 2f
      mPaint.color = mNormalColor
      c.drawCircle(width / 2f, height / 2f, radius, mPaint)
      mPaint.color = mProgressColor
      mRectF.left = width / 2f - radius // 左上角x
      mRectF.top = height / 2f - radius// 左上角y
      mRectF.right = width / 2f + radius  // 左下角x
      mRectF.bottom = height / 2f + radius// 右下角y
      c.drawArc(mRectF, -90f, (mCurrentLevel * 1f / mMaxLevel) * 360, false, mPaint)
    }
  }
  //</editor-fold>

  //<editor-fold defaultstate="collapsed" desc="设置等级">
  fun setLevel(currentLevel: Int, maxLevel: Int = 10) {
    mMaxLevel = maxLevel
    mCurrentLevel = currentLevel
    postInvalidate()
  }
  //</editor-fold>
}

相关文章

  • 2022-07-25 简单绘制扇形进度条

    1.效果图如下(外圈效果): 2.源代码如下:

  • 扇形进度条

    分享一个扇形进度条,核心思想是用贝塞尔曲线绘制扇形形成进度条子单位,然后通过修改layer的fillcolor实现...

  • 扇形进度条 - iOS

    绘制扇形进度条 背景:上传文件的时候,需要有上传进度,这次需要一个扇形的进度条,示例图如下: 废话不多说,上代码:...

  • 简单绘制环形,扇形进度条

    之前看到别人写的环形进度条,自己有加改进,这是我刚写文章,不知道怎么像别人那样写的那么好,希望您多包涵,Demo很...

  • 「AI教程」轻松绘制扇形渐变

    扇形渐变,在ps用角度渐变很好绘制,AI里没有角度渐变,那怎么样轻松的绘制扇形渐变呢? 此教程简单粗暴,但非常有效...

  • 用Canvas绘制抽奖游戏

    具体实现代码如下:1.绘制跑马灯 2.绘制每一份的抽奖扇形图 3.在扇形上绘制奖品 demo地址为:https:/...

  • Android Kotlin自定义View绘制圆形图表,选中放大

    绘制一个图表,可以选中状态如下 简单说一下流程:1.基本原理是遍历绘制扇形每次绘制记录起始点,然后再绘制一个白色圆...

  • iOS绘制一个简单的环形进度条

    环形进度条 一个简单的环形进度组件。 用UIBezierPath + CAShaperLayer绘制 1、由于使用...

  • 可拖动的进度条加值气泡

    内容分为3部分,1、可以拖动的进度条;2、绘制气泡;3、气泡中间放个lebel1、可以拖动的进度条1.1、简单的,...

  • Android中canvas基本使用

    canvas绘制 基本方法: canvas.drawArc ()//(扇形) canvas.drawCircle(...

网友评论

      本文标题:2022-07-25 简单绘制扇形进度条

      本文链接:https://www.haomeiwen.com/subject/tlenirtx.html