A. Introduction of Canvas

Canvas, we can call it Canvas, can draw all kinds of things on it, is the basis of 2D graphics drawing on Android platform, very powerful.

2. Common operations of Canvas

Operation type The relevant API note
Paint color drawColor, drawRGB, drawARGB Fill the entire canvas with a single color
Draw basic shapes drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc Point, line, rectangle, rounded rectangle, ellipse, circle, arc
Draw pictures drawBitmap, drawPicture Draw bitmaps and pictures
Draw text drawText, drawPosText, drawTextOnPath Draw text, specify the position of each text when drawing text, and draw text according to the path
Draw the path drawPath It’s also used when you plot a path, when you plot bezier curves
Vertex operations drawVertices, drawBitmapMesh We can deform images by manipulating vertices. The drawVertices are used directly on the canvas, and the drawBitmapMesh is used only on the drawn Bitmap
The canvas clipping clipPath, clipRect Sets the display area of the canvas
The canvas snapshot save, restore, saveLayerXxx, restoreToCount, getSaveCount Save the current state, roll back to the last saved state, save the layer state, roll back to the specified state, and obtain the save times
The canvas transform translate, scale, rotate, skew The order is displacement, scaling, rotation, and tangent
Matrix (Matrix) getMatrix, setMatrix, concat In fact, the canvas displacement, scaling and other operations are all image Matrix, but Matrix is difficult to understand and use, so it encapsulates some commonly used methods.

3. Canvas explanation

Paint color

Paint color fills the entire canvas and is often used to paint a background color.

  @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.drawColor(Color.RED); // Draw red
    }Copy the code

Create a brush

To draw content, first create a brush like this:

   // Create a brush
   private Paint mPaint = new Paint();

   /** * Initialize some content, and get custom attributes. * @param context
     * @param attrs
     */

    public CustomView(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        // Initialize the brush
        initPaint();
    }

    private void initPaint()
    {
        // Set the brush color
        mPaint.setColor(Color.RED);
        // Set the brush mode
        mPaint.setStyle(Paint.Style.FILL);
        // Set the brush width
        mPaint.setStrokeWidth(10f);
        // Set anti-aliasing
        mPaint.setAntiAlias(true);
    }Copy the code

Plot points

You can draw a point or a group of points as follows:

  @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.drawColor(Color.RED); // Draw red
        // Draw a point at the coordinates (350,400)
        canvas.drawPoint(350.400,mPaint);
        canvas.drawPoint(300.400,mPaint);
        // Draw multiple points
        canvas.drawPoints(new float[] {400.400.400.500.400.600.400.700.400.800.400.900},mPaint);
    }
Copy the code

Draw a straight line

Drawing a line requires two points, the starting point and the ending point. Similarly, drawing a line can also draw one or a group of points

        // Draw a line between coordinates (100,100) and (600,100)
        canvas.drawLine(100.100.600.100,mPaint);
        // Draw multiple lines
        canvas.drawLines(new float[] {100.150.600.150.100.200.600.200.100.250.600.250},mPaint);Copy the code

Draw a rectangle

Determine a rectangle needs at least four data, namely the coordinate values of the two points on the diagonal. The coordinates of the two points on the upper left and lower right corner are generally used here.


/ / the first
canvas.drawRect(100.100.800.400,mPaint);

/ / the second
Rect rect = new Rect(100.100.800.400);
canvas.drawRect(rect,mPaint);

/ / the third kind
RectF rectF = new RectF(100.100.800.400);
canvas.drawRect(rectF,mPaint);Copy the code

Rect is an int and RectF is a float. Rect is a float.

Draw rounded rectangles

   // Draw rounded rectangles
   RectF rectF = new RectF(100.100.600.300);
   canvas.drawRoundRect(rectF,20.20,mPaint);Copy the code

Draw the ellipse

Drawing an ellipse is much easier than drawing a rounded rectangle because it only needs a rectangle as a parameter

  // Draw the ellipse
  RectF rectF = new RectF(100.100.600.400);
  canvas.drawOval(rectF,mPaint);Copy the code

Draw the circle

    // Draw a circle with a center of (360,400) and a radius of 300.
    canvas.drawCircle(360.400.300,mPaint);Copy the code

Draw the arc

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint){}Copy the code

As can be seen from the above, there are three more parameters to draw an arc than an ellipse:

// Start Angle
startAngle  
// Sweep the Angle
sweepAngle  
// Whether to use the center
useCenter   Copy the code

Directly on the code:


        RectF rectF = new RectF(100.100.600.600);// Draw the background rectangle mPaint.setColor(Color.GRAY);
        canvas.drawRect(rectF,mPaint);// Draw arc (without center point) mPaint.setColor(Color.BLUE);
        canvas.drawArc(rectF,0.90,false,mPaint);


        RectF rectF1 = new RectF(100.700.600.1200);// Draw the background rectangle mPaint.setColor(Color.GRAY);
        canvas.drawRect(rectF1,mPaint);// Draw arc (using center point) mPaint.setColor(Color.BLUE);
        canvas.drawArc(rectF1,0.90,true,mPaint);
Copy the code

4. Paint is introduced

What if we want to draw a circle, as long as the sides don’t have the color inside?

Very simple, the basic shape of the drawing is determined by the Canvas, but the color and effect of the drawing are determined by the Paint.

We can set the style for Paint

// Set the brush mode to fill mPaint.setStyle(Paint.Style.FILL);  Copy the code
Paint.Style describe
STROKE stroke
FILL fill
FILL_AND_STROKE Stroke fill

Refer to the article

GcsSloop: Android custom View advanced -Canvas drawing graph