Custom View's Drawing chapter (i): Drawing of the base drawing

Life is a mirror, you laugh at it, it laughs at you, you cry to it, it also cries to you. --Thackeray

Before the beginning of the text, I throw a brain hole open topic to everyone: businessmen to 45 yuan a pair into the purchase of 2 pairs of shoes, and then a loss of 301 pairs for sale. A customer gave him 100 to buy 2 pairs of shoes, the businessman did not change to find so take this 100 to find neighbors change 100 of change, then the neighbors found this 100 is false, businessmen had to accompany the neighbors 100 really ... How much did the merchant lose?

Related articles:

Android Custom View Path parsing

First, paint and canvas

Drawing requires two tools, pens and paper. Here is the equivalent of a Paint pen, but Canvas the equivalent of paper, but note that Canvas (canvas) infinity, no boundaries, remember to understand that only the screen size. I have an analogy here, the Canvas whole sky, and the screen is the view through the window.

Then I need to change the brush size, thickness, color, transparency, font style, etc. all need to be set in the Paint inside, also to draw the circle, the rectangle, the irregular shape is Canvas inside the operation.

Basic setup functions for Paintpaint

1. mPaint.setAntiAlias(true) //设置是否抗锯齿;
2. mPaint.setStyle(Paint.Style.FILL_AND_STROKE); //设置填充样式
3. mPaint.setColor(Color.GREEN);//设置画笔颜色
4. mPaint.setStrokeWidth(2);//设置画笔宽度
5. mPaint.setShadowLayer(10,15,15,Color.RED);//设置阴影

1, Setantialias (true) set whether anti-aliasing

Setting antialiasing makes the edges of the image clearer and the jagged traces less noticeable.

2. SetStyle (Paint.style style) set fill style

Paint.StyleType:

Paint.Style.FILL_AND_STROKEFill and stroke
Paint.Style.STROKEStrokes
Paint.Style.FILLFill

Take a look at the above three types, here is the example of a rectangle:

Visible, FILL with FILL_AND_STROKE no difference in effect.

3. SetColor (@ColorInt int color) Set the brush color

This method is relatively simple, and here is no longer a complaint.

4, Setstrokewidth (float width) Set brush width

This method is also relatively simple, slightly ...

5, Setshadowlayer (float radius, float dx, float dy, int shadowcolor) Set the shadow

Let's take a look at the meaning of the parameter representation:

Radius: Indicates the tilt of the shadow
DX: Horizontal Displacement
DY: Vertical Displacement
Shadowcolor: Shadow Color

See a simple example:

 paint.setShadowLayer(5,10,10,Color.parseColor("#abc133"));

：

Here you may have a question, why did I show myself a shadow of a shape like a rectangle, a circle, and only see the shadow of the text? So we need to be aware that this method does not support hardware acceleration, so we must turn off hardware acceleration when testing.

Then please add setLayerType(LAYER_TYPE_SOFTWARE, null); and make sure you are the minimum api8 .

Canvas

Canvas Background settings:

canvas.drawColor(Color.BLUE);anvas.drawRGB(2552550);  

These two functions are all used to set the background color.

We just need to rewrite the onDraw(Canvas canvas) method to draw the graph you want.

    @Override    protectedvoidonDraw(Canvas canvas) {        super.onDraw(canvas);         //绘制图形        }

Second, the basic Geometry drawing 1, Draw straight line

Method preview:

drawLine(floatfloatfloatfloat stopY,            @NonNull Paint paint)

Parameters:

StartX: Start point x coordinate
Starty: Start point y coordinate
STOPX: End point x coordinate
Stopy: End point Y coordinate

paint.setStyle(Paint.Style.FILL);paint.setStrokeWidth(5);    paint.setColor(Color.parseColor("#FF0000"));canvas.drawLine(100,100,600,600,paint);

2, more than one straight line

Method preview:

drawLines(@Size(min=4,multiple=2floatintint count, Paint paint)drawLines(@Size(min=4,multiple=2@NonNullfloat@NonNull Paint paint)

Parameters:

PTS: is a collection of points with a minimum size of 4 and a multiple of 2 . Indicates that each 2 point connection forms a straight line, and the PTS are organized in {X1,y1,x2,y2 ...}
Offset: The number of skipped values in the collection, note not the number of points! One point is two values
Count: Number of values drawn, refers to the number of values in pts[], not the number of points, because a point is two values

Let's look at an example:

        float [] pts={50,50,200,200,400,400,600,600};        canvas.drawLines(pts,paint);

The point (50,50) and the point (200,200) are connected into a straight line, and the point (400,400) and the point (600,600) are connected in a straight line.

Let's look at the following example:

        float [] pts={50,50,200,200,400,400,600,600};        canvas.drawLines(pts,1,4,paint);

Represents a straight line connecting 4 points (50,200,200,400) starting from the second 50

3, points and multiple points

Method preview:

drawPoint(floatfloat@NonNull Paint paint)drawPoints(@Size(multiple=2@NonNullfloat@NonNull Paint paint)drawPoints(@Size(multiple=2floatintint count,            @NonNull Paint paint)

The drawing of the point is like the drawing of the line above, and I am not going to complain here.

4. Rectangle

Method preview:

drawRect(@NonNull@NonNull Paint paint)drawRect(@NonNull@NonNull Paint paint)drawRect(floatfloatfloatfloat@NonNull Paint paint)

The difference is RectF Rect that the RectF coordinate system is floating-point and the Rect coordinate system is shaping.

Rounded Rectangle Method Preview:

drawRoundRect(@NonNullfloatfloat@NonNull Paint paint)drawRoundRect(floatfloatfloatfloatfloatfloat ry,            @NonNull Paint paint)

Parameters:

RECTF: Drawn Rectangle
Rx: Ellipse x-axis radius of the resulting fillet
Ry: radius of the y-axis of the ellipse that generated the fillet

5, round

Method preview:

drawCircle(floatfloatfloat@NonNull Paint paint)

Parameters:

CX: center x coordinate
CY: Center y coordinate
Radius: Radius

canvas.drawCircle(400,400,300,paint);

6. Ellipse

Method preview:

drawOval(@NonNull@NonNull Paint paint)drawOval(floatfloatfloatfloat@NonNull Paint paint)

7. Arc

Method preview:

drawArc(@NonNullfloatfloatboolean useCenter,            @NonNull Paint paint)drawArc(floatfloatfloatfloatfloat startAngle,            floatboolean@NonNull Paint paint)

Parameters:

Oval: The rectangle that generated the ellipse
StartAngle: The angle at which the arc starts (the positive direction of the x-axis is 0 degrees, and the clockwise arc increases)
SweepAngle: How many radians to draw (note not to end radians)
Usecenter: If there are both sides of the arc true there are both sides false without both sides

Brush Settings Fill:

Paint. SetStyle(Paint. Style. FILL);RECTF rect=new RECTF ( -, -, -, -);Canvas. DrawArc(Rect,0, -, False,paint);RECTF rf=new RECTF ( -, -, -,1100);Canvas. DrawArc(RF,0, -, True,paint);

Brush set Strokes:

Paint. SetStyle(Paint. Style. STROKE);RECTF rect=new RECTF ( -, -, -, -);Canvas. DrawArc(Rect,0, -, False,paint);RECTF rf=new RECTF ( -, -, -,1100);Canvas. DrawArc(RF,0, -, True,paint);

The drawing of the base drawing is almost over.

Custom View's Drawing chapter (i): Drawing of the base drawing