曲線圖標RecyclerBezierChart 的繪制

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

三階貝塞爾曲線

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

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

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

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

cubicPath

曲線圖底部是漸變Color區(qū)域，這里構建了封閉的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);
}

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

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

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

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

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

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

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

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

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

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

最新評論