绘制简单条形图（带一个直角的圆角矩形）

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()}}}

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


http://www.chinasem.cn/article/390358。

相关文章

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
hdu2289（简单二分）

hdu2289（简单二分）

虽说是简单二分，但是我还是wa死了  题意：已知圆台的体积，求高度 首先要知道圆台体积怎么求：设上下底的半径分别为r1,r2,高为h,V = PI*(r1*r1+r1*r2+r2*r2)*h/3 然后以h进行二分 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#includ
阅读更多...
usaco 1.3 Prime Cryptarithm(简单哈希表暴搜剪枝)

usaco 1.3 Prime Cryptarithm(简单哈希表暴搜剪枝)

思路： 1. 用一个 hash[ ] 数组存放输入的数字，令 hash[ tmp ]=1 。 2. 一个自定义函数 check( ) ，检查各位是否为输入的数字。 3. 暴搜。第一行数从 100到999，第二行数从 10到99。 4. 剪枝。 代码： /*ID: who jayLANG: C++TASK: crypt1*/#include<stdio.h>bool h
阅读更多...
uva 10387 Billiard（简单几何）

uva 10387 Billiard（简单几何）

题意是一个球从矩形的中点出发，告诉你小球与矩形两条边的碰撞次数与小球回到原点的时间，求小球出发时的角度和小球的速度。 简单的几何问题，小球每与竖边碰撞一次，向右扩展一个相同的矩形；每与横边碰撞一次，向上扩展一个相同的矩形。 可以发现，扩展矩形的路径和在当前矩形中的每一段路径相同，当小球回到出发点时，一条直线的路径刚好经过最后一个扩展矩形的中心点。 最后扩展的路径和横边竖边恰好组成一个直
阅读更多...
poj 1113 凸包+简单几何计算

poj 1113 凸包+简单几何计算

题意： 给N个平面上的点，现在要在离点外L米处建城墙，使得城墙把所有点都包含进去且城墙的长度最短。 解析： 韬哥出的某次训练赛上A出的第一道计算几何，算是大水题吧。 用convexhull算法把凸包求出来，然后加加减减就A了。 计算见下图： 好久没玩画图了啊好开心。 代码： #include <iostream>#include <cstdio>#inclu
阅读更多...
uva 10130 简单背包

uva 10130 简单背包

题意： 背包和 代码： #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <stack>#include <vector>#include <queue>#include <map>
阅读更多...
【WebGPU Unleashed】1.1 绘制三角形

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123 在 3D 渲染领域，三角形是最基本的绘制元素。在这里，我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
利用matlab bar函数绘制较为复杂的柱状图，并在图中进行适当标注

利用matlab bar函数绘制较为复杂的柱状图，并在图中进行适当标注

示例代码和结果如下：小疑问：如何自动选择合适的坐标位置对柱状图的数值大小进行标注？😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87
阅读更多...
JAVA用最简单的方法来构建一个高可用的服务端，提升系统可用性

JAVA用最简单的方法来构建一个高可用的服务端，提升系统可用性

一、什么是提升系统的高可用性 JAVA服务端，顾名思义就是23体验网为用户提供服务的。停工时间，就是不能向用户提供服务的时间。高可用，就是系统具有高度可用性，尽量减少停工时间。如何用最简单的方法来搭建一个高效率可用的服务端JAVA呢？ 停工的原因一般有： 服务器故障。例如服务器宕机，服务器网络出现问题，机房或者机架出现问题等；访问量急剧上升，导致服务器压力过大导致访问量急剧上升的原因；时间和
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2