カスタムViewインプリメンテーションレンダリング

読む前にAndroidカスタムグラフ:ChartView
必要:
上記の例では、テストデータを修正した後、得られたView画像は次のようになります.
縦座標7.45以上5.97以下の部分は赤、7.45と6.43の間は緑、6.18と6.43の間は黄色で、効果は以下の通りです.
カスタムViewを知っている人は、ある点から別の点に描く過程で、Paintとcanvasを通じて知っているはずです.drawLine()は、異なる色の線を描くのは容易ではありません.2つの異なる線に分かれていると、どのように描くかの複雑さが増すに違いありません.では、私たちはどのようにして下図の効果を作りますか.
1、レンダリングバックグラウンドのRectを初期化する

private Rect mColorBgRect = new Rect(0, mTopPadding, w, mColEndY);

2、背景ペンをレンダリングする

    //      
    public void shaderColorBgPaint(Rect rect) {
        LinearGradient linearGradient = new LinearGradient(rect.left, rect.top, rect.left, rect.bottom, getShaderColor(), getShaderPosition(), Shader.TileMode.MIRROR);
        mColorBgPaint.setShader(linearGradient);
    }

    //         @COLORS_SHADER   LinearGradient       
    public int[] getShaderColor(){
        int[] colors = new int[COLORS_SHADER.length * 2];
        for (int i = 0, len = colors.length; i < len ; i+=2) {
            colors[i] = COLORS_SHADER[i/2];
            colors[i+1] = COLORS_SHADER[i/2];
        }
        return colors;
    }

    //         @RATIOS_SHADER   LinearGradient       
    public float[] getShaderPosition() {
        float[] position = new float[COLORS_SHADER.length * 2];
        position[0] = JOIN_SHADER;
        position[1] = RATIOS_SHADER[0] - JOIN_SHADER;
        for (int i = 1, len = RATIOS_SHADER.length; i < len ; i++) {
            position[i*2] = RATIOS_SHADER[i-1] + JOIN_SHADER;
            position[i*2+1] = RATIOS_SHADER[i] - JOIN_SHADER;
        }
        return position;
    }

3、setShader()の設定に必要なShader

mColorBgPaint.setShader(linearGradient); 

4、レンダリングの背景を描く

      //          
        Bitmap tagBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas tagCanvas = new Canvas(tagBitmap);
        tagCanvas.drawRect(mColorBgRect, mColorBgPaint);

5、表示されたデータを描画する–ここは曲線です

        //     
        Bitmap curveBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas curveCanvas = new Canvas(curveBitmap);
        drawCurve(curveCanvas);  //          ，         

6、合成モードPorterDuffを設定.Mode.DST_IN

        Paint paint = new Paint(); 
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); //       
        tagCanvas.drawBitmap(curveBitmap, mMatrix, paint);

具体的なPorterDuff.Mode.DST_INは2つのレイヤーを取るために交差を描画します.下段を表示ここで下段の背景色を取ります.具体的にsetXfermodeについての理解は、以下のリンクandroid PorterDuffXfermode,PorterDuffを参照することができる.Modeの使用およびPorter-Duffルールの詳細
7、レンダリング後のグラフを描く

    //          
    private void drawBeautifulCurve(Canvas canvas) {
        if (mCurveBitmap == null) {
            mCurveBitmap = getBeautfulCurve();
        }
        canvas.drawBitmap(mCurveBitmap, 0, 0, null);
    }

以上の手順でグラフィックのレンダリング描画が完了し、具体的なコードがGithubに更新されました.
今期の最適化内容:
1、クリック、スライドイベントを追加し、クリックとスライドで現在の点の具体的な情報を表示する.2、スクリーンの最適化.3、外領域をクリックして現在の情報表示をキャンセルする.4、現在の描画色をレンダリングします.
以下は最新のダウンロードリンクです.
Githubダウンロードアドレス:https://github.com/JackWaiting/ChartView