绘制简单条形图(带一个直角的圆角矩形)
- 一种方案是: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()}}}
绘制简单条形图(带一个直角的圆角矩形)相关推荐
- R语言绘制简单条形图
自己用了一个csv文件 要求: 数据:data3_1.csv.根据2000个消费者网购情况的调查数据,分别绘制性别, 大数据 R 语言程序设计实验 河北地质大学 信息工程学院 大数据专业 网购次数和满 ...
- OpenGL利用橡皮筋技术绘制简单图形(直线、圆、矩形、三角形)
总结出以下经验: 想清空屏幕时,要用双缓冲模式,因为单缓冲模式清空时没反应,只会在下一次绘制时清空原来的图形.双缓冲模式可以立即清空屏幕. glutMotionFunc() 函数和 glutPassi ...
- 在Android中绘制圆角矩形图片
圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,下面在Android中实现将普通的矩形图片绘制成圆角矩形. 先来看一下普通矩形图片的显示,代码很简单,从r ...
- 在Canvas中绘制圆角矩形
问题的提出 要在Canvas中绘制一个矩形,使用strokeRect或fillRect函数即可. var canvas = document.getElementById("canvas&q ...
- Android中绘制圆角矩形图片及任意形状图片
转自http://blog.csdn.net/silangquan/article/details/8056583 圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为 ...
- Android带渐变效果的圆角矩形Demo
/*** 带渐变色效果的圆角矩形* * @description:* @author ldm* @date 2016-4-26 下午3:47:12*/ public class RoundRectsA ...
- 如何使用Sketch绘制半个圆角矩形
想要制作MacOS中Finder切换目录展示模式的效果: 那么如何实现左右两端选中时只有半个圆角矩形被填充的效果呢?问题的关键是要制作出半个圆角矩形. Sketch中绘制半个圆角矩形的步骤如下: 首先 ...
- SolidWorks基础教程:用SolidWorks绘制简单零件过程(通孔针管工具)
目录 需求: 目标零件成型图: 制作过程 1.新建零件: 2.绘制前视基准面的草图: 3.在草图中画出,三维模型在此二维面上的样子,然后通过旋转拉伸等操作变成立体. 4.画草图: 5.用智能尺寸标注尺 ...
- UI设计 | 圆角矩形为什么能成为设计趋势?
https://www.uisdc.com/rounded-rectangle-to-design-trends 图形是产品设计中被讨论得最多的元素之一.视觉设计师使用不同形状的图形来表达事物的多样性 ...
- C语言圆角矩形画法,UI们:圆角矩形环快速画法
编按: 圆角矩形在UI中使用非常广.但如何快速地从圆角矩形做出标准的圆角矩形环(你也可以叫做中空圆角矩形)呢?简单的缩放可不成!!本文作者从认识圆角矩形开始,与大家一起绘制各种圆角矩形图案,包括圆角矩 ...
最新文章
- 基尼不纯度简介 - Gini Impurity
- MediaPlayer开发全解析
- 谷歌开源预训练新范式BiT,准确率提高近25%!网友评价:CV界的BERT
- 工厂三兄弟之简单工厂模式(二)
- 计算机中的进制和编码
- SAP CRM get_children 方法里面参数 iv_as_copy 有什么用?
- 在域驱动设计中使用状态模式
- react 遍历对象_React 和 Vue 之间的相爱相杀
- 用busybox制作文件系统
- Processing编程学习指南2.5 Processing中的代码
- Linux驱动中delayed_workqueue使用:
- 产学研2.0:麦可思大学生就业据、企业创新调查年鉴(含产学研部分)、RD相关数据等
- KlipC数据显示2022年日元兑美元汇率有进一步下跌的风险和可能性
- 智行订票系统需求分析报告
- 2016年全国高中数学联合竞赛试题及详细解答
- CodeLab:Android fundamentals 04.2:Input controls
- rstp 转hls_EasyHLS实现将IPCamera摄像机的RTSP转HLS直播输出
- 996加班骗局被揭穿,背后真相值得深思!
- 在虚拟环境安装使用Django新建项目避坑
- ELK---索引(Elasticsearch 7.17)