[Android UI] Canvas canvas ⑦ (Canvas drawing display area Canvas drawing rectangle source code analysis)

Hits: 0

Article directory

In the Canvas state preservation mechanism , there are two stack structures, namely the state stack and the layer stack ;

The layer stack is also called the Layer stack;

In the Canvas canvas, there are 2 2 2Set of coordinate systems, respectively:

  • Canvas own coordinate system
  • Canvas drawing coordinate system

1. [Canvas] drawing display area

When Canvas is drawn, it is not drawn by Canvas. The hardware that performs the drawing is GPU ; the drawing position depends on the two coordinate systems of Canvas, its own coordinate system and the drawing coordinate system;

The specific position of drawing an image in Canvas is the position coordinate in the coordinate system, and the coordinate is divided into the following two types:

The coordinate system of Canvas itself is the outermost coordinate system in the state stack. Once the component is successfully created, the coordinate system will not change; the coordinate system of Canvas itself is determined in the ViewRootImpl#draw method in the drawing process and cannot be changed. ; Refer to [[Android UI] Canvas Canvas ⑥ (Canvas drawing source code analysis | ViewRootImpl#draw method source code | ViewRootImpl#drawSoftware method source code)]](/article/details/125727956) blog;

The Canvas drawing coordinate system is the coordinate system where the image to be drawn is currently located. The drawing coordinate system indicates where the specific drawn element is to be drawn . The drawing coordinate system is performed by several times of translation, rotation, and scaling of the Canvas’ own coordinate system. come;

Call Canvas#translate , Canvas#rotate , Canvas#scale methods to change the drawing coordinate system of Canvas;

A very important function of the Canvas’ own coordinate system is to determine the canvas range . After that, all the drawing content can only display the elements within the canvas range, and the elements that draw the boundary are not displayed;

As shown in the figure below, the blue rectangle is the Canvas’ own coordinate system , the red rectangle is the Canvas drawing coordinate system , the green rectangle is the part where the two coordinate systems overlap , and the content drawn in the red rectangle is not displayed in the interface;

Second, Canvas draw rectangle [source code] analysis

Call the Canvas#drawRect method to draw a rectangle. The function prototype called is as follows:

     * Draws the specified rectangle using the specified draw. The rectangle will be filled or bordered according to the style in the painting.
     * @param rect The rectangle to draw
     * @param paint the brush for drawing the rectangle
    public void drawRect(@NonNull RectF rect, @NonNull Paint paint) {
        super.drawRect(rect, paint);

In the above function, the BaseCanvas#drawRect method of the parent class is called,

public void drawRect(@NonNull RectF rect, @NonNull Paint paint) {
                rect.left, rect.top, rect.right, rect.bottom, paint.getNativeInstance());

In the above function, the native method BaseCanvas#nDrawRect is called, which is used to call the GPU for drawing;

private static native void nDrawRect(long nativeCanvas, float left, float top, float right,
            float bottom, long nativePaint);

When drawing a rectangle, split the Rect into four data, upper left, right lower, float left, float top, float right, float bottom, which is the data in the drawing coordinate system;

You may also like...

Leave a Reply

Your email address will not be published.