文章目录

背景

最近LoL s10全球总决赛正在如火如荼的进行，作为一名老玩家，笔者在观看比赛的同时，注意到每场比赛的经济对比图实时的展示，并且红蓝双方的经济曲线对比呈现不同的颜色，于是笔者来了兴趣，能否在安卓上自定义控件实现相似的功能呢？说干就干，经过笔者不懈的努力，终于实现了相似的功能。

实现效果

需求分析

LoL实时仅仅对比图需实现以下功能：按照阵营分为红蓝双方，蓝方在基准线以上，红方在基准线一下，曲线显示双方的经济差，当蓝方经济领先，曲线在基线上方，且曲线为蓝色，当红方经济领先，在基线一下，变为红色。当用户选择某个时间段，能显示出当前时间段的经济坐标。

实现思路

首先，我们需要将数据封装成对应的x，y 坐标的集合，，然后在绘制x轴，y轴，接着将点与点之间用贝塞尔曲线联合。如何实现在两点之间绘制一条三阶贝塞尔曲线，并且实现基线以上是蓝色，基线一下是红色，成为难点，这里我们的思路是分段绘制的思路，即计算计算出两点连线与基线的焦点，然后分段绘制，这里在分段绘制时，采用三阶贝塞尔曲线。如何控制锚点，使其连线看起来更加平滑成为难题。
如果读者对三阶贝塞尔曲线不甚了解，可以去查看相关文档。
经过笔者多番调试，终于调出较为满意的效果。

代码实现

绘制x轴

 // 画x轴private fun drawXAxis(canvas: Canvas) {val rate = returnRate()val y = layoutRect.bottom - textHeightmTimeTextPaint.textAlign = Paint.Align.CENTERmTimeTextPaint.strokeWidth = 2fmTimeTextPaint.style = Paint.Style.FILLval showNum = currentDescArray.sizefor (i in 0 until showNum) {val x =(rate * i) + lineStartX.toFloat() + tempPaddingStartX.toFloat()canvas.drawText(currentDescArray[i], x, y, mTimeTextPaint)}}

绘制y轴

 // 画Y轴及线private fun drawYAxis(canvas: Canvas) {if (txtYArray.isEmpty()) returnmPaint.style = Paint.Style.FILLmPaint.strokeWidth = 5fmPaint.color = Color.BLACKval keyValueY = (distanceH / (lineNumY + 1)).toFloat()var yValue: Float      //记录y的值var showStr: String?for (i in 0 until lineNumY) {yValue = keyValueY * (i + 2) - subtractPaddingif (txtYArray[i] > 0) {showStr = (txtYArray[i] / 1000).toString() + "k"mPaint.color = resources.getColor(R.color.color_team_blue)canvas.drawText(showStr,(lineStartX - showPadding).toFloat(),yValue + 0.25f * textHeight,mPaint)} else if (txtYArray[i] == 0F) {showStr = txtYArray[i].toString()mPaint.color = resources.getColor(R.color.color_999)canvas.drawText(showStr,(lineStartX - showPadding).toFloat(),yValue + 0.25f * textHeight,mPaint)} else {showStr = (Math.abs(txtYArray[i] / 1000)).toString() + "k"mPaint.color = resources.getColor(R.color.color_team_red)canvas.drawText(showStr,(lineStartX - showPadding).toFloat(),yValue + 0.25f * textHeight,mPaint)}canvas.drawLine((lineStartX - showPadding).toFloat() + yleftWidth / 2 + 20,yValue,(distanceW - lineStartX + showPadding).toFloat(),yValue,mLinePaint)if (i == 0) {topLineY = yValue}if (i == lineNumY - 1) {btmLinY = yValue}}}

绘制贝塞尔曲线

private fun drawBeizer(canvas: Canvas) {if (pointList.isNotEmpty()) {mPaint.style = Paint.Style.STROKEmPaint.strokeWidth = 8FmPaint.color = resources.getColor(R.color.color_team_red)var startp: Pointvar endp: Pointfor (i in 0 until pointList.size - 1) {startp = pointList[i]endp = pointList[i + 1]//两个点同时在基线上if (startp.py < baseZeroy && endp.py < baseZeroy) {mPaint.color = resources.getColor(R.color.color_team_blue)val wt = (startp.px + endp.px) / 2path.reset()path.moveTo(startp.px, startp.py)path.cubicTo(wt, startp.py, wt, endp.py, endp.px, endp.py)canvas.drawPath(path, mPaint)}//两个点同时在基线下else if (startp.py > baseZeroy && endp.py > baseZeroy) {mPaint.color = resources.getColor(R.color.color_team_red)val wt = (startp.px + endp.px) / 2path.reset()path.moveTo(startp.px, startp.py)path.cubicTo(wt, startp.py, wt, endp.py, endp.px, endp.py)canvas.drawPath(path, mPaint)}//一个点在基线上，一个点在基线下,此时分成两段去绘制else {//当前基线的与该线段较短的x坐标var baseZeroX = getZeroX(startp.px, endp.px, startp.py, endp.py)//起点在基线一下if (startp.py > baseZeroy) {mPaint.color = resources.getColor(R.color.color_team_red)val wtleft = (startp.px + baseZeroX) / 2val htLeft= (startp.py + baseZeroy) / 2var leftRateX=(baseZeroX-startp.px)/4var leftRateY=(baseZeroy-startp.py)/4path.reset()path.moveTo(startp.px, startp.py)path.cubicTo(wtleft, startp.py, wtleft+leftRateX, htLeft-leftRateY, baseZeroX, baseZeroy)canvas.drawPath(path, mPaint)mPaint.color = resources.getColor(R.color.color_team_blue)val wtRight = (baseZeroX + endp.px) / 2val htRight= (baseZeroy + endp.py) / 2var rightRateX=(endp.px-baseZeroX)/4var rightRateY=(endp.py-baseZeroy)/4path.reset()path.moveTo(baseZeroX, baseZeroy)   //为了保持裁点时曲线的平滑path.cubicTo(wtRight-rightRateX, htRight+rightRateY, wtRight, endp.py, endp.px, endp.py)canvas.drawPath(path, mPaint)} else {mPaint.color = resources.getColor(R.color.color_team_blue)val wtleft = (startp.px + baseZeroX) / 2val htLeft= (startp.py + baseZeroy) / 2var leftRateX=(baseZeroX-startp.px)/4var leftRateY=(baseZeroy-startp.py)/4path.reset()path.moveTo(startp.px, startp.py)path.cubicTo(wtleft, startp.py, wtleft+leftRateX, htLeft-leftRateY, baseZeroX, baseZeroy)canvas.drawPath(path, mPaint)mPaint.color = resources.getColor(R.color.color_team_red)val wtRight = (baseZeroX + endp.px) / 2val htRight= (baseZeroy + endp.py) / 2var rightRateX=(endp.px-baseZeroX)/4var rightRateY=(endp.py-baseZeroy)/4path.reset()path.moveTo(baseZeroX, baseZeroy)path.cubicTo(wtRight-rightRateX, htRight+rightRateY, wtRight, endp.py, endp.px, endp.py)canvas.drawPath(path, mPaint)}}}}}

绘制触摸效果

private fun drawTouch(canvas: Canvas) {if (pointList.size > 0 && linex >= 0 && linex < pointList.size) {var currentPoint = pointList[linex]//基线一下if (currentPoint.py >= baseZeroy) {mValueLinePaint?.color = resources.getColor(R.color.color_team_red)canvas.drawCircle(pointList[linex].px,pointList[linex].py,14F,mValueLinePaint!!)// 小圆mValueLinePaint?.isAntiAlias = truemPointLine.color = resources.getColor(R.color.color_team_red)canvas.drawLine(pointList[linex].px,topLineY,pointList[linex].px,btmLinY,mPointLine)} else {mValueLinePaint?.color = resources.getColor(R.color.color_team_blue)canvas.drawCircle(pointList[linex].px,pointList[linex].py,14F,mValueLinePaint!!)// 小圆mValueLinePaint?.isAntiAlias = truemPointLine.color = resources.getColor(R.color.color_team_blue)canvas.drawLine(pointList[linex].px,topLineY,pointList[linex].px,btmLinY,mPointLine)}if (listener == null) returndataLists[linex].avg.toString()listener?.onPointSelect(buleTeam,redTeam,currentPoint.px,currentPoint.py,dataLists[linex].timeStamp,dataLists[linex].avg.toString(),distanceW)}}

小结

附上GitHub的地址，大家如果需要可以进去clone下来，仔细研读，如果觉得还行，能对你有所帮助，别忘了给我个star哦

github地址

自定义高仿LOL经济曲线对比图相关推荐

用Python做多曲线对比图，----论文map，精度，损失一图多曲线对比
用Python做多曲线对比图,----论文map,精度,损失一图多曲线对比很多时候都需要在一张图中做多曲线的效果对比,比如统一数据集不同方法,论文作图等. 直接上代码 import numpy as ...
Matlab-TOA定位算法性能仿真 TOA-LLOP和TOA-CHAN得到位置的估计两种算法的性能比较两种算法的RMSE曲线对比图
本博客环境为Matlab2018 ,软件版本不同可能会有些出入,需要稍作修改. TOA定位算法性能的仿真要求一:编写两个函数TOA_LLOP和TOA_CHAN得到位置的估计. 要求二:用RMSE实现 ...
小马哥----高仿苹果5se 机型界面图面面观，低配机型谨防假冒
遇到的这款高仿苹果5se 主板芯片为6572 nand字库整机连接手机调换到内存卡模式.只有12m 坑爹的山寨上图拆机图与整机前后图
android记账本折线图_Android自定义View - 仿支付宝月账单折线图
前言支付宝有个查看月账单的功能,最近一直在学习自定义View,于是就尝试着自己实现了一个类似的折线图. 下面是支付宝消费分析功能截图和自己实现的折线效果截图: 支付宝消费分析折线图.jpg 效果1. ...
EV,PV,AC,SPI,CPI中曲线对比图
在某个机构的培训课程中,介绍了EV,PV,AC,SPI,CPI的不同曲线,然后软考中会问你,什么曲线情况下要采用什么方法: 其中ACWP=AC,BCWS=PV,BCWP=EV
小马哥-----高仿小米 note刷机 h78机型型号机型新旧版机型对比图与开机识别对比图
高仿小米note H78机型型号日期版本有分别刷错会导致刷机平台刷对应资料代码提示4032 具体主板型号一样,背面标示贴稍有区别看中壳背面对比图警惕
小马哥---高仿苹果6p 主板型号Q33-qhd 刷机拆机主板图与开机界面图与Q33-hd主板对比差别图
高仿苹果版本较多此次展示的是主板型号为Q33-qhd的机型 Q33系列分Q33-qhd与Q33 -hd两个版本.机型屏幕硬件不同刷错资料花屏芯片都是6582 主要区别拆机看主板标示贴上图
股票图,K线图,蜡烛图,高仿雪球股票
股票图,K线图,蜡烛图,高仿雪球股票,教你一步步实现股票图项目地址讲K线图之前,先来一个引言. 作为Android开发者需要立即提升的三项技能: 分别是:UI,网络,线程,而UI又分:布局,绘制, ...
一步步教你画股票图,K线图,高仿雪球股票
股票图,K线图,蜡烛图,高仿雪球股票,教你一步步实现股票图项目地址 _005.gif _006.gif 讲K线图之前,先来一个引言. 前两天听了朱凯大神的知乎live,其中说到一点,作为Androi ...

自定义高仿LOL经济曲线对比图

LOL经济曲线对比图