Custom View Implementation Rendering

Before reading, you can read the Android custom chart: ChartView

Requirement: After we have modified the test data through the above example, we get the view image as follows:

And we want the effect is the ordinate 7.45 above and 5.97 below the part is red, 7.45 and 6.43 is green, 6.18 and 6.43 is yellow, the effect is as follows:

To understand the custom view of the students should clearly draw from one point to another point of the process, through the paint and Canvas.drawline () draw a different color line is very difficult to do, if divided into two different lines, is undoubtedly more increase the complexity of how a drawing process.
So how do we do this effect.

1. Initialize the rect of the rendered background

privatenew Rect(0, mTopPadding, w, mColEndY);

2. Render the background pen

    //Render background pen     Public void Shadercolorbgpaint(Rect rect) {LinearGradient LinearGradient =NewLinearGradient (Rect.left, Rect.top, Rect.left, Rect.bottom, Getshadercolor (), Getshaderposition (),        Shader.TileMode.MIRROR);    Mcolorbgpaint.setshader (lineargradient); }//Convert the normal understood color @colors_shader to the desired color for lineargradient drawing     Public int[]Getshadercolor(){int[] Colors =New int[Colors_shader.length *2]; for(inti =0, Len = colors.length; i < Len; i+=2) {Colors[i] = colors_shader[i/2]; colors[i+1] = colors_shader[i/2]; }returnColors }//Convert the normal understanding proportional @ratios_shader to the scale required for lineargradient drawing     Public float[]getshaderposition() {float[] Position =New float[Colors_shader.length *2]; position[0] = Join_shader; position[1] = ratios_shader[0]-Join_shader; for(inti =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; }returnPosition }

3, set the Setshader () required shader

mColorBgPaint.setShader(linearGradient);  

4. Draw a rendered background

      // 绘制一个渲染的背景        Bitmap tagBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);        Canvas tagCanvas = new Canvas(tagBitmap);        tagCanvas.drawRect(mColorBgRect, mColorBgPaint);

5. Draw the displayed data – here is the curve

        // 绘制曲线        Bitmap curveBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);        new Canvas(curveBitmap);        drawCurve(curveCanvas);  //这个方法是具体的绘制，后面会给出源码地址

6. Set the composition mode PorterDuff.Mode.DST_IN

        Paint paint = new Paint();         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); // 设置合成模式        tagCanvas.drawBitmap(curveBitmap, mMatrix, paint);

The specific PorterDuff.Mode.DST_IN is to draw the intersection of two layers. Show lower level here is the background color of the removed layer.
Specific information about Setxfermode, you can see the following links
Android Porterduffxfermode, Porterduff.mode use and Porter-duff rules

7. Draw the graph after rendering

    // 绘制渲染后的曲线图    privatevoiddrawBeautifulCurve(Canvas canvas) {        ifnull) {            mCurveBitmap = getBeautfulCurve();        }        00null);    }

The above steps can be done to render the drawing, the specific code has been updated to GitHub,

The content of this issue is optimized:

1, add click, swipe events, click and swipe to view the current point of specific information.
2. Optimize screen adaptation.
3, click the outside area to cancel the current information display.
4. Render the current drawing color first.

Here is the latest download link:

Github:https://github.com/jackwaiting/chartview

Custom View Implementation Rendering