曲線圖標RecyclerBezierChart 的繪制

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

三階貝塞爾曲線

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

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

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

得到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);
}

整個主體圖表的繪制邏輯大致如上，非常簡單。

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

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

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

對于不是第一個，最后點， 計算公式：

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

兩個邊界位置Index 邊界的原因稍作變動，具體如下：

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

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

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

最新評論