本章節(jié)繼上次的底部Volume繪制的后續(xù)，沒(méi)有再繼續(xù)畫(huà)底部的其它圖表，這只是一個(gè)舉一反三的過(guò)程，本章節(jié)實(shí)現(xiàn)的圖表的縮放，其實(shí)需求很明確，然后實(shí)現(xiàn)方式依照上章節(jié)末尾的方案，所以還算清晰，只是整個(gè)過(guò)程得慢慢的調(diào)試，慢慢地優(yōu)化，當(dāng)然目前還有很多待改進(jìn)的地方，但總體縮放的功能已經(jīng)實(shí)現(xiàn)了。

照舊先看gif效果圖，由于A(yíng)ndroid studio的錄屏沒(méi)法把我的手指觸控的小圓點(diǎn)錄上去，所以看不到我的手指，多指操作。

以下是實(shí)現(xiàn)前，以及實(shí)現(xiàn)過(guò)程中羅列的功能點(diǎn)。

1. BaseRecyclerViewChart 處理 OnTouch

2. 禁止掉多指拖動(dòng)，影響測(cè)試。（這個(gè)暫時(shí)沒(méi)處理掉）

3. displayNumber 跟 detector.scaleFactor的關(guān)系計(jì)算，反比。

4. 設(shè)置 min、max limit level， 橫豎屏不一樣，不同的設(shè)置。

5. 修改displayNumber 后，RecyclerView 如何刷新。

6. 縮放時(shí)，刷新位置不準(zhǔn)確，通過(guò)PointsX 找 Adapter, 找到虛擬手指中心點(diǎn)，對(duì)Adapter進(jìn)行縮放。

7. maxDisplayNumber 為400， 180 ~ 400的區(qū)間 KLine Main 繪制 LineChart， 30 ~ 180 繪制目前的圖形。

8. 7的情況下，在LineChart下 drawFill()

1. 擴(kuò)展縮放功能且兼容原有的觸摸體系

首先要保留原來(lái)的觸摸功能不變，同時(shí)添加現(xiàn)在的縮放，得修改BaseRecyclerviewChart的 OnTouch 方法, 最終保留BaseRecyclerviewChart不變，然后相關(guān)的功能放在了StockChartRecyclerView里，這樣就一點(diǎn)都不影響之前的圖表繪制了。

優(yōu)先處理 scaleGestureDetector 縮放，同時(shí)又保持了原來(lái)的觸摸體系，很好地?cái)U(kuò)展了目前的功能。

val result = scaleGestureDetector.onTouchEvent(event)
if (!scaleGestureDetector.isInProgress) {
            //原來(lái)的邏輯
//   Log.d(TAG, "scaleGestureDetector is not in Progress")
     return super.onTouchEvent(event)
 } else {
   Log.d(TAG, "scaleGestureDetector is in Progress")
   return result
 }

2. 具體的縮放邏輯處理

處理的就是上面羅列功能里的第3點(diǎn)，構(gòu)建了一個(gè)簡(jiǎn)單的displayNumber跟detector.scaleFactor的模型，當(dāng)scaleFactor增加的時(shí)候，displayNumber反而變少。

if (detector.scaleFactor >= 1) {//放大
  displayNumber -= (displayNumber * (detector.scaleFactor - 1)).toInt()
} else {
  displayNumber += (displayNumber * (1 - detector.scaleFactor)).toInt()
}

理論上值返回是 0 ~ 無(wú)窮大，相應(yīng)的displayNumber也變成 0 ~ 無(wú)窮大， 所以這里引入一個(gè)上下邊界。

var minDisplayNumber = 30
var maxDisplayNumber = 400
?
displayNumber = displayNumber.coerceAtLeast(minDisplayNumber).coerceAtMost(maxDisplayNumber)

3. 數(shù)據(jù)刷新

從以上的邏輯中拿到縮放后的displayNumber，如何給到Recyclerview進(jìn)行刷新？首先在onScale()內(nèi)埋個(gè)鉤子，然后UI頁(yè)面在這個(gè)回調(diào)里進(jìn)行數(shù)據(jù)刷新，這里對(duì)mAttrs中的displayNumber也做一個(gè)刷新，容錯(cuò)處理，怕后續(xù)去讀這個(gè)里面的值。

resetDisplayNumber是一個(gè)高階函數(shù)的變量

var resetDisplayNumber: ((displayNumber:Int) -> Unit)? = null

接著就是UI頁(yè)面上的刷新處理，

recyclerView.resetDisplayNumber = { displayNumber ->
     this@KLineDayFragment.displayNumber = displayNumber
     mXAxis.resetDisplayNumber(this@KLineDayFragment.displayNumber)
     mBarChartAdapter.updateXAxis(mXAxis)
}

真正刷新的邏輯在mBarChartAdapter.updateXAxis(mXAxis)，在BaseBarChartAdapter中添加updateXAxis

public void updateXAxis(XAxis xAxis){
  this.mXAxis = xAxis;
  notifyDataSetChanged();
}

上面的notifyDataSetChanged()之后就會(huì)對(duì)RecylcerView進(jìn)行刷新：

這樣子就會(huì)因?yàn)?displayNumber的改變，然后修改XAxis，最終刷新RecyclerView。

4. 縮放過(guò)程KLine Main圖表變幻

這個(gè)實(shí)現(xiàn)的上面功能列表里的第7、8點(diǎn)，實(shí)現(xiàn)相對(duì)上面的縮放邏輯而言，功能比較簡(jiǎn)單，本來(lái)打算借用StockEntry的close字段值去畫(huà)線(xiàn)的，這里先直接借用5日均線(xiàn)進(jìn)行一個(gè)繪制，這個(gè)函數(shù)原來(lái)就有的，先實(shí)現(xiàn)功能。

直接看StockChartRenderer的繪制主邏輯代碼。

之前只有 if分支，這次添加了else里面的drawLine, 最后一個(gè)參數(shù)表示 是否drawFill， drawLine跟之前的LineChartRenderer里暫時(shí)去掉了邊界處理， drawFill里 bottom是 KLine Main 跟之前的Attache Chart的一個(gè)分割線(xiàn)

drawFill比較簡(jiǎn)單，就是通過(guò)PointF1, PointF2, bottom 構(gòu)建一個(gè)path，然后drawPath 就可以了

private fun drawFill(canvas: Canvas,pointF: PointF, pointF1: PointF, bottom: Float) {
    mLineFillPaint.color = ColorUtil.getResourcesColor(R.color.black_2)
    val path = ChartComputeUtil.createColorRectPath(pointF, pointF1, bottom)
    val drawable = LineChartDrawable(mLineFillPaint, path)
    drawable.draw(canvas)
}
?
public static Path createColorRectPath(PointF pointF1, PointF pointF2, float bottom) {
    Path path = new Path();
    path.moveTo(pointF1.x, pointF1.y);
    path.lineTo(pointF2.x, pointF2.y);
    path.lineTo(pointF2.x, bottom);
    path.lineTo(pointF1.x, bottom);
    path.close();
    return path;
}

Okay, 縮放的邏輯大致就到此，然后還有一些bug, 例如縮放后，底部XAxis label的繪制在縮放過(guò)程中相應(yīng)地變動(dòng)。還有縮放模型的優(yōu)化，功能點(diǎn)里的6不知道是否跟目前一些晃動(dòng)有關(guān)，后續(xù)再慢慢優(yōu)化吧。

下次應(yīng)該會(huì)添加底部的MACD圖，其實(shí)跟Volume的繪制是類(lèi)同的工作，創(chuàng)建模擬MACD的Entity構(gòu)建，然后繪制就可以了，然后就是一個(gè)添加一個(gè)底部Attache Chart的一個(gè) 手勢(shì)監(jiān)測(cè)，目前的點(diǎn)擊是HighLight，然后需要替換成底部各個(gè)Attache Chart 圖表的一個(gè)替換，涉及到的一個(gè)之前沒(méi)處理過(guò)的一個(gè)View的上面部分跟底下點(diǎn)擊然后在自定義的情況下，用不同的Callback調(diào)用處理，應(yīng)該還好處理，相比今天的縮放而言。

到此這篇關(guān)于基于RecyclerChart的KLine的繪制Scale詳解的文章就介紹到這了,更多相關(guān)RecyclerChart KLine繪制Scale內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論