绘制简单条形图(带一个直角的圆角矩形)

2023-11-11 13:21

本文主要是介绍绘制简单条形图(带一个直角的圆角矩形),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  • 一种方案是:path先添加一个圆角矩形,再添加一个角的正方形
  • 另一种直接通过api ,radii 需要传入8个数值,分四组,从左上角开始
    addRoundRect(RectF rect, float[] radii, Direction dir)

中间有个小点:如果在一个循环里,同时画柱子和文字,会出现前面3个柱子上的文字被柱子覆盖,只有最后1个柱子才展示文字标记。

比如说1是柱子,2是文字,画个柱子,画个文字;往右边挪挪位置,再画个柱子,再画个文字就是12121212的顺序,会出现前面3个2被1覆盖;使用两个循环,先把柱子全部画完,然后再画文字,就是11112222的顺序,这样是ok的
在这里插入图片描述

完整代码

class BarGraphView @JvmOverloads constructor(context: Context, attributeSet: AttributeSet? = null, defStyle: Int = 0): View(context, attributeSet, defStyle) {private val item1BgColor = 0xFFA28AFF.toInt()private val item2BgColor = 0xFFD4EFFF.toInt()private val item1TextColor = Color.WHITEprivate val item2TextColor = 0xFF3FB6FF.toInt()private val textColor = 0xFF999999.toInt()private val titleColor = 0xFF666666.toInt()private val dividerColor = 0xFFEEEEEE.toInt()private val _11SP = DensityUtil.sp2px(11f).toFloat()private val _12SP = DensityUtil.sp2px(12f).toFloat()private val circleRadius = DensityUtil.dp2px(3.5f).toFloat()private val _8DP = DensityUtil.dp2px(8f).toFloat()private val _17DP = DensityUtil.dp2px(17f).toFloat()private val _24DP = DensityUtil.dp2px(24f).toFloat()private var itemWidth = 0fprivate val mPaint = Paint()private val paintItem1 = Paint()private val paintItem2 = Paint()private val pathItem1 = Path()private val pathItem2 = Path()private val rectFItem1 = RectF()private val rectFItem2 = RectF()private val radiiItem1: FloatArray = floatArrayOf(_8DP, _8DP, _8DP, _8DP, 0f, 0f, _8DP, _8DP)private val radiiItem2: FloatArray = floatArrayOf(_8DP, _8DP, _8DP, _8DP, _8DP, _8DP, 0f, 0f)
//    private val rectFTemp = RectF()private var graphHeight = 0fprivate val verticalAxis = arrayListOf<String>("0%", "25%", "50%", "75%", "100%")private val horizontalAxis = arrayListOf<String>("第1节-xxx", "第2节", "第3节", "第4节")private val mData = arrayListOf<RateItem>()init {mPaint.isAntiAlias = truemPaint.style = Paint.Style.FILLmPaint.strokeWidth = 1fpaintItem1.isAntiAlias = truepaintItem1.style = Paint.Style.FILLpaintItem1.color = item1BgColorpaintItem2.isAntiAlias = truepaintItem2.style = Paint.Style.FILLpaintItem2.color = item2BgColorsetLayerType(View.LAYER_TYPE_SOFTWARE, mPaint)setLayerType(View.LAYER_TYPE_SOFTWARE, paintItem1)setLayerType(View.LAYER_TYPE_SOFTWARE, paintItem2)}override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {super.onSizeChanged(w, h, oldw, oldh)"w $w  h $h  oldw $oldw  oldh $oldh".log()graphHeight = h - _17DPitemWidth = 0.08f * w}fun setData(data: List<RateItem>) {mData.clear()mData.addAll(data)invalidate()}override fun onDraw(canvas: Canvas) {canvas.translate(0f, 0.88f * height)//中心点
//        mPaint.color = Color.RED
//        canvas.drawCircle(0f, 0f, 10f, mPaint)//绘制标题栏的两个圆点mPaint.color = item1BgColorcanvas.drawCircle(circleRadius, -0.78f * height, circleRadius, mPaint)mPaint.color = item2BgColorcanvas.drawCircle(width / 2f - _8DP - circleRadius, -0.78f * height, circleRadius, mPaint)//绘制标题栏的两行文字mPaint.color = titleColormPaint.textSize = _12SPmPaint.typeface = Typeface.DEFAULT_BOLDcanvas.drawText("宝贝xxxxxxxxxx", 2 * circleRadius + _8DP, -0.76f * height, mPaint)canvas.drawText("全国xxxxxxxxxxxxxxxxxxx", width / 2f, -0.76f * height, mPaint)mPaint.textSize = _11SPmPaint.typeface = Typeface.DEFAULTval heightInterval = graphHeight / 6fval widthInterval = width / 4.5fvar stepY = heightInterval//绘制Y轴,百分比for (item in verticalAxis) {stepY -= heightIntervalmPaint.color = dividerColorcanvas.drawLine(0.4f * widthInterval, stepY, width.toFloat(), stepY, mPaint)mPaint.color = textColorcanvas.drawText(item, 0f, stepY + _11SP / 2f, mPaint)"heightInterval $heightInterval  widthInterval $widthInterval  stepY $stepY  ".log()}//把Y轴高度分成100份,用于弥补数据源的非百分比stepY /= 100f//绘制X轴var stepX = -_17DPval halfTextWidth = mPaint.measureText("第1节") / 2ffor (index in 0 until horizontalAxis.size) {if (index >= mData.size) breakstepX += widthInterval//绘制X轴mPaint.textSize = _11SPmPaint.color = textColormPaint.typeface = Typeface.DEFAULTcanvas.drawText(horizontalAxis[index], stepX - (mPaint.measureText(horizontalAxis[index]) / 2f - halfTextWidth), heightInterval - _8DP, mPaint)//绘制条形图,计算x点val mid = stepX + halfTextWidthval left = mid - itemWidthval right = mid + itemWidth//绘制第一个竖状图val item1Height = stepY * mData[index].childRaterectFItem1.set(left, item1Height, mid, 0f)pathItem1.moveTo(mid, 0f)pathItem1.addRoundRect(rectFItem1, radiiItem1, Path.Direction.CCW)
//            rectFTemp.set(mid - _8DP, -_8DP, mid, 0f)
//            pathItem1.addRect(rectFTemp, Path.Direction.CCW)pathItem1.close()canvas.drawPath(pathItem1, paintItem1)//绘制第二个竖状图val item2Height = stepY * mData[index].averageRaterectFItem2.set(mid, item2Height, right, 0f)pathItem2.moveTo(mid, 0f)pathItem2.addRoundRect(rectFItem2, radiiItem2, Path.Direction.CW)
//            rectFTemp.set(mid, -_8DP, mid + _8DP, 0f)
//            pathItem2.addRect(rectFTemp, Path.Direction.CW)pathItem2.close()canvas.drawPath(pathItem2, paintItem2)"heightInterval $heightInterval  widthInterval $widthInterval  stepX $stepX  pathItem1 $rectFItem1  pathItem2 $rectFItem2   _17DP$_17DP".log()}//绘制X轴stepX = -_17DPmPaint.textSize = _12SPmPaint.typeface = Typeface.DEFAULT_BOLDfor (index in 0 until horizontalAxis.size) {if (index >= mData.size) breakstepX += widthInterval//绘制条形图,计算x点val mid = stepX + halfTextWidthval left = mid - itemWidthval right = mid + itemWidthval item1Height = stepY * mData[index].childRateval item2Height = stepY * mData[index].averageRate//标记第一个竖状图的分数mPaint.color = item1TextColorval childRateStr = mData[index].childRate.toString()val x1 = (left + mid - mPaint.measureText(childRateStr)) / 2;val y1 = if (item1Height > -_24DP) item1Height else item1Height + _17DPcanvas.drawText(childRateStr, x1, y1, mPaint)//标记第二个竖状图的分数mPaint.color = item2TextColorval averageRateStr = mData[index].averageRate.toString()val x2 = (mid + right - mPaint.measureText(childRateStr)) / 2val y2 = if (item2Height > -_24DP) item2Height + _11SP else item2Height + _17DPcanvas.drawText(averageRateStr, x2, y2, mPaint)"childRateStr $childRateStr   averageRateStr $averageRateStr   text1 $x1 * $y1  text2  $x2 * $y2".log()
//            "childRateStr $childRateStr   averageRateStr $averageRateStr   heightInterval $heightInterval  widthInterval $widthInterval  stepX $stepX  pathItem1 $rectFItem1  pathItem2 $rectFItem2   _17DP$_17DP".log()}}}

这篇关于绘制简单条形图(带一个直角的圆角矩形)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/ZHENZHEN9310/article/details/108538749
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/390358

相关文章

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

redis群集简单部署过程

《redis群集简单部署过程》文章介绍了Redis,一个高性能的键值存储系统,其支持多种数据结构和命令,它还讨论了Redis的服务器端架构、数据存储和获取、协议和命令、高可用性方案、缓存机制以及监控和... 目录Redis介绍1. 基本概念2. 服务器端3. 存储和获取数据4. 协议和命令5. 高可用性6.

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》:本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先,从DeepSeek平台获取API密钥,用于身份验证。添加HTTP客户端依赖使用Jav

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始,然后逐步加入更复杂的功能。这里我们将先实现一个简单的

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》:本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.

使用PyQt5编写一个简单的取色器

《使用PyQt5编写一个简单的取色器》:本文主要介绍PyQt5搭建的一个取色器,一共写了两款应用,一款使用快捷键捕获鼠标附近图像的RGB和16进制颜色编码,一款跟随鼠标刷新图像的RGB和16... 目录取色器1取色器2PyQt5搭建的一个取色器,一共写了两款应用,一款使用快捷键捕获鼠标附近图像的RGB和16

四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

《四种简单方法轻松进入电脑主板BIOS或UEFI固件设置》设置BIOS/UEFI是计算机维护和管理中的一项重要任务,它允许用户配置计算机的启动选项、硬件设置和其他关键参数,该怎么进入呢?下面... 随着计算机技术的发展,大多数主流 PC 和笔记本已经从传统 BIOS 转向了 UEFI 固件。很多时候,我们也

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》:本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要

使用Python绘制可爱的招财猫

《使用Python绘制可爱的招财猫》招财猫,也被称为“幸运猫”,是一种象征财富和好运的吉祥物,经常出现在亚洲文化的商店、餐厅和家庭中,今天,我将带你用Python和matplotlib库从零开始绘制一... 目录1. 为什么选择用 python 绘制?2. 绘图的基本概念3. 实现代码解析3.1 设置绘图画