曲線圖標(biāo)RecyclerBezierChart 的繪制

本篇介紹曲線圖標(biāo)RecyclerBezierChart 的繪制， 同樣圖表的公共部分的繪制這里不再做介紹，主體圖表的繪制邏輯在BezierChartRender類中，其中包含主體曲線的繪制以及底部fill部分的漸變色的繪制。

三階貝塞爾曲線

曲線的繪制用的三階貝塞爾曲線，關(guān)于貝塞爾曲線相關(guān)的知識(shí)讀者可自行Google，Android中的三階貝塞爾曲線的繪制API接口，以下為Path構(gòu)建三階曲線，其中包含兩個(gè)Control Points.

這里的繪制邏輯主要參考了MPAndroidChart中的曲線繪制.

首先將Entry的 Y值轉(zhuǎn)換成對(duì)應(yīng)的PointF，這個(gè)之前圖表都有同樣的操作，存入originPointFList， 然后通過(guò)originPointFList計(jì)算對(duì)應(yīng)的 Control Points List, 存入 controList, 其中ControlPoint 這個(gè)類筆者自定義的包含了兩個(gè)Control Point 點(diǎn)，緊接著Control Point的計(jì)算再介紹。

得到originPointFList, controList后，每次迭代套用Path.cubicTo(controlPoint1, controlPoint2, endPoint) API即可，最終得到 cubicPath.

cubicPath

曲線圖底部是漸變Color區(qū)域，這里構(gòu)建了封閉的Path cubicFillPath, 其中包含了cubicPath。

private void drawCubicFill(RecyclerView parent, Canvas c, List<PointF> pointFList, Path spline, float bottom) {
    spline.lineTo(pointFList.get(pointFList.size() - 1).x, bottom);
    spline.lineTo(pointFList.get(0).x, bottom);
    spline.close();
    drawFilledPath(parent, c, spline);
}

整個(gè)主體圖表的繪制邏輯大致如上，非常簡(jiǎn)單。

下面是剛提到的關(guān)于 Control Point 的計(jì)算， 這里定義了一個(gè)類 ControlPoint, 包含兩個(gè)Control Point點(diǎn)。上面計(jì)算controList 方法也就作為 它的static 方法放在ControlPoint 中了。

List<ControlPoint> controlList = ControlPoint.getControlPointList(originPointFList, mBarChartAttrs.bezierIntensity);

其中 bezierIntensity 表示控制貝塞爾曲線曲率強(qiáng)度的一個(gè)參數(shù)系數(shù)。

對(duì)于不是第一個(gè)，最后點(diǎn)， 計(jì)算公式：

controlPoint.x = cur.x + (next.x - pre.x) * bezierIntensity; Y值同理。

兩個(gè)邊界位置Index 邊界的原因稍作變動(dòng)，具體如下：

至此曲線圖的繪制結(jié)束，非常簡(jiǎn)單，最后附上一張RecyclerBezierChart的gif 圖。

本專欄到這里幾個(gè)常用的圖表的純繪制介紹完了，接下來(lái)大致兩到三章節(jié)介紹圖表動(dòng)態(tài)相關(guān)的邏輯，選中高亮的控制，長(zhǎng)按選中滑動(dòng)跟RecyclerView本身滑動(dòng)的一個(gè)沖突上的解決；控制同一天顯示在一屏?xí)r的回彈的控制邏輯。

以上就是RecyclerBezierChart曲線圖表繪制的詳細(xì)內(nèi)容，更多關(guān)于RecyclerBezierChart圖表繪制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論