網站首頁 編程語言 正文
正文
本篇介紹線性圖標RecyclerLineChart 的繪制，對于圖表的公共部分X、Y軸，背景Board等的繪制先前章節已經有過介紹，這里不再重復；以及高亮選中頂部的poupWindow基本的繪制邏輯跟BarChart類似，可參照之前章節。所以針對LineChart，這里只介紹主體圖表的繪制邏輯，以及線性表底部的drawFillColor填充。
首先介紹主體圖表的邏輯，與BarChart不同之處在于，BartChart的每個Item的繪制比較獨立，而LineChart對于當前的Item，需要找到PreItem或者NextItem中的Y的點進行drawLine, 相比而言稍顯復雜一些。圖表的中間位置的Line還比較容易繪制，圖表左右邊界是LineChart繪制最難的地方。
整個的繪制邏輯第一章節有介紹在Render類中，這里的話是LineChartRender的drawLineChartWithoutPoint 方法里，這個方法代碼比較長，分段介紹：
private <T extends BarEntry> void drawLineChartWithoutPoint(Canvas canvas, RecyclerView parent, YAxis mYAxis) {
final float parentRightBoard = parent.getWidth() - parent.getPaddingRight();
final float parentLeft = parent.getPaddingLeft();
BaseBarChartAdapter adapter = (BaseBarChartAdapter) parent.getAdapter();
List<T> entryList = adapter.getEntries();
final int childCount = parent.getChildCount();
int adapterPosition;
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
T barEntry = (T) child.getTag();
if (barEntry.getY() == 0) {
continue;
}
adapterPosition = parent.getChildAdapterPosition(child);
RectF rectF = ChartComputeUtil.getBarChartRectF(child, parent,
mYAxis, mLineChartAttrs, barEntry);
PointF pointF2 = new PointF((rectF.left + rectF.right) / 2, rectF.top);
// 這里還有好多繪制邏輯代碼
}//end for
}// end drawLineChartWithoutPoint
整個繪制繪制依次遍歷 Adapter中當前展現的點，總共childcount 個，遍歷的當前點位pointF2， 以pointF2 為基準接下來會涉及找 pointF0，pointF1， 這兩在pointF2左邊（假設存在的情況下）；pointF3, pointF4, 這兩個點在PointFd2的右邊，之所以要找左右各兩個點是處理邊界情況。
正常情況下繪制邏輯
連接pointF1、pointF2。
if (i < childCount - 1) {//這里的LayoutManager設置的reverse倒敘，所以i+1在i的左邊i對應的是pointF2
View pointF1Child = parent.getChildAt(i + 1);
T barEntryLeft = (T) pointF1Child.getTag();
//這里的RectF跟之前的Barchart類似，為ItemView中除去space后所占的RectF區域，其中pointF1的X為RectF的X軸方向的中心。
RectF rectFLeft = ChartComputeUtil.getBarChartRectF(pointF1Child, parent, mYAxis, mLineChartAttrs, barEntryLeft);
//找到PointF1
PointF pointF1 = new PointF((rectFLeft.left + rectFLeft.right) / 2, rectFLeft.top);
//parentLeft為左邊界， parentRightBoard 為Chart的右邊界
if (pointF1.x >= parentLeft && pointF2.x <= parentRightBoard) {
float[] pointsOut = new float[]{pointF1.x, pointF1.y, pointF2.x, pointF2.y};
drawChartLine(canvas, pointsOut);//繪制正常情況下的Line。
drawFill(parent, mLineChartAttrs, canvas, pointF1, pointF2, rectF.bottom);
//其它邊界繪制邏輯。
}//end if
左邊界繪制
以上的情況是pointF1.x 在Chart內，見圖， 黃色為當前的PointF1, 紫色為PointF2， 上面代碼李drawLine繪制的是PointF1跟PointF2之前的連線。
繼續看上面的那個圖，要繪制PointF1到Chart左邊邊界的線段，需要繼續找到PointF0，然后用PointF0、PointF1與Chart相交得到上圖黑色圈里的點，記為pointFIntercept， drawLine(pointFIntercept, PointF1)
if (pointF1Child.getLeft() < parentLeft) {//左邊界，處理pointF1值顯示出來了的情況。
if (adapterPosition + 2 < entryList.size()) {
float x = pointF1.x - pointF1Child.getWidth();
T barEntry0 = entryList.get(adapterPosition + 2);
float y = ChartComputeUtil.getYPosition(barEntry0, parent, mYAxis, mLineChartAttrs);
PointF pointF0 = new PointF(x, y);
//PointF0、PointF1 跟Chart的交點pointFIntercept
PointF pointFIntercept = ChartComputeUtil.getInterceptPointF(pointF0, pointF1, parentLeft);
float[] points = new float[]{pointFIntercept.x, pointFIntercept.y, pointF1.x, pointF1.y};
drawChartLine(canvas, points);
drawFill(parent, mLineChartAttrs, canvas, pointFIntercept, pointF1, rectF.bottom);
}
}
上面是 pointF1.x >= parentLeft，在左邊界內的情況，當pointF1.x < parentLeft時，rectLeft 出來一小部分的情況，如下圖所示：紫色為當前的PointF2點
這時需要求PointF1、PointF2跟Chart相交的點pointF， 然后drawLine(pointF, PointF2)即可， 見代碼：
if (pointF1.x < parentLeft && pointF1Child.getRight() >= parentLeft) {//左邊界，處理pointF1值沒有顯示出來
PointF pointF = ChartComputeUtil.getInterceptPointF(pointF1, pointF2, parentLeft);
float[] points = new float[]{pointF.x, pointF.y, pointF2.x, pointF2.y};
drawChartLine(canvas, points);
drawFill(parent, mLineChartAttrs, canvas, pointF, pointF2, rectF.bottom);
}
右邊界繪制
處理完左邊界的繪制，右邊界的繪制跟左邊界大致一樣，PointF2 往右兩個點PointF3， PointF4; 注意這里RecyclerView的LayoutManager為reverse, 所以當 PointF2對應的下標為i時， PointF3對應的為i-1, PointF4為i-2.
然后就是分情況討論PointF3.x 是否在Chart范圍內，跟parentRightBorad比較即可。
看PointF3.x 在 Chart范圍內的情況，如圖：紫色為PointF2點，黃色為PonitF3點，黑色為PointF3，PointF4跟Chart的交點，這里只需要繪制PointF3跟交點之間的Line；PointF2、PointF3之間的Line 在當黃色點遍歷到i時，紫色點位PointF1,所以這里不需要重復繪制了。
代碼邏輯
if (pointF3.x < parentRightBoard) {//pointF3 在界內。
if (adapterPosition - 2 > 0) {
float xInner = pointF3.x + child.getWidth();
T barEntry4 = entryList.get(adapterPosition - 2);
float yInner = ChartComputeUtil.getYPosition(barEntry4, parent, mYAxis, mLineChartAttrs);
PointF pointF4 = new PointF(xInner, yInner);//找到PointF4.
PointF pointFInterceptInner = ChartComputeUtil.getInterceptPointF(pointF3, pointF4, parentRightBoard);
float[] pointsInner = new float[]{pointF3.x, pointF3.y, pointFInterceptInner.x, pointFInterceptInner.y};
drawChartLine(canvas, pointsInner);
drawFill(parent, mLineChartAttrs, canvas, pointF3, pointFInterceptInner, rectF.bottom);
}
}
最后就是 pointF3.x >parentRightBoard的情況，見圖：紫色為PointF2, 黃色為 PointF2、PointF3跟Chart的交點：
代碼邏輯如下：
if (pointF3.x > parentRightBoard) {//在Chart之外。
PointF pointFIntercept = ChartComputeUtil.getInterceptPointF(pointF2, pointF3, parentRightBoard);
float[] points = new float[]{pointF2.x, pointF2.y, pointFIntercept.x, pointFIntercept.y};
drawChartLine(canvas, points);
drawFill(parent, mLineChartAttrs, canvas, pointFIntercept, pointF2, rectF.bottom);
}
以上的邊界處理中涉及到的工具類方法求相交點，簡單的數學公司帶入：
public static PointF getInterceptPointF(PointF pointF1, PointF pointF2, float x) {
float width = Math.abs(pointF1.x - pointF2.x);
float height = Math.abs(pointF1.y - pointF2.y);
float interceptWidth = Math.abs(pointF1.x - x);
float interceptHeight = interceptWidth * 1.0f / width * height;
float y;
if (pointF2.y < pointF1.y) {
y = pointF1.y - interceptHeight;
} else {
y = pointF1.y + interceptHeight;
}
return new PointF(x, y);
}
見以上圖表中的紅色半透明的FillColor的繪制，每次drawLine()緊跟著就是drawFill(), 以下是drawFill的邏輯，跟X軸構建一個path,然后drawPath 即可：
private void drawFill(RecyclerView parent, LineChartAttrs mBarChartAttrs, Canvas canvas, PointF pointF, PointF pointF1, float bottom) {
if (mBarChartAttrs.enableLineFill) {
float yBottom = parent.getBottom() - parent.getPaddingBottom();
float yTop = parent.getTop() + parent.getPaddingTop();
LinearGradient mLinearGradient = new LinearGradient(
0,
yBottom,
0,
yTop,
new int[]{
mBarChartAttrs.lineShaderBeginColor, mBarChartAttrs.lineShaderEndColor},
null,
Shader.TileMode.CLAMP
);
mLineFillPaint.setShader(mLinearGradient);
Path path = ChartComputeUtil.createColorRectPath(pointF, pointF1, bottom);
LineChartDrawable drawable = new LineChartDrawable(mLineFillPaint, path);
drawable.draw(canvas);
}
}
設置了一個Color的Linear漸變從bottom到top.
至此，RecyclerLineChart的主體圖表繪制邏輯介紹完畢。還有部分的細節，當前Point帶圓圈，以及邊界圓圈的繪制等，選中圓圈的處理等多處細節，讀者想了解的，可以GitHub上下載看源碼demo, 連接在本專欄的第一篇里有鏈接。
原文鏈接：https://juejin.cn/post/7174775634168643639
相關推薦
- 2023-11-23 cmake: command not found
- 2023-02-10 docker實現跨宿主機的容器之間網絡互聯_docker
- 2023-05-19 Kotlin?Suspend掛起函數的使用詳解_Android
- 2022-02-12 redis 快捷啟動 注冊服務，jar包注冊成服務，開機啟動
- 2022-09-16 Golang實現Biginteger大數計算實例詳解_Golang
- 2023-04-11 C#圖片處理如何生成縮略圖的實現_C#教程
- 2022-04-05 Python+Opencv答題卡識別用例詳解_python
- 2022-10-19 react-redux多個組件數據共享的方法_React
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速