The tailor in Canvas explains and practices, and summarizes the interview

Keywords: Android Design Pattern Interview

public boolean clipRect(float left, float top, float right, float bottom)
public boolean clipRect(int left, int top, int right, int bottom)
public boolean clipRect(@NonNull Rect rect)
public boolean clipRect(@NonNull RectF rect)

2,clipOutPath

public boolean clipOutPath(@NonNull Path path)

Description: only the canvas area outside the path is left, while those within the path range are not displayed( (opposite to the scope of clipPath)

It is worth noting that this method can only be called above API26. In the lower version, we use the method described in the next section

for instance:

We first prepare a heart-shaped path Path, and then call clipOutPath to cut out the area beyond this path from the canvas. Finally, for our observation, we use drawColor to dye the wine red.

// Step 1: create heart path mPath
....Omit, please move github

// Step 2: cut the area outside the heart-shaped path from the canvas
canvas.clipOutPath(mPath);

// Step 3: paint wine red
canvas.drawColor(mBgColor);

Rendering [external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-bwrff2k2-1630841978227)( https://user-gold-cdn.xitu.io/2019/4/27/16a5ce605a01f641? imageView2/0/w/1280/h/960/ignore-error/1)]

There are several other methods of this type, but their clipping range is rectangular

public boolean clipOutRect(float left, float top, float right, float bottom)
public boolean clipOutRect(int left, int top, int right, int bottom)
public boolean clipOutRect(@NonNull Rect rect)
public boolean clipOutRect(@NonNull RectF rect)

3,clipPath

public boolean clipPath(@NonNull Path path, @NonNull Region.Op op)

Description: use the path path to operate on the canvas. The function is determined by the op.

The description is abstract. We can experience it through examples. However, before the above example, we need to understand the enumeration type Region.Op. the specific content code is as follows

public enum Op {
    // A: Cut the path for us first
    // B: Cut the path for us

    // The part of A shape different from B is displayed
    DIFFERENCE(0),
    // The shape of the intersection of A and B
    INTERSECT(1),
    // Complete sets of A and B
    UNION(2),
    // The complete set shape of A and B, excluding the part after the intersection shape
    XOR(3),
    // The part of B shape different from A is displayed
    REVERSE_DIFFERENCE(4),
    // Show only the shape of B
    REPLACE(5);

	// ... omit irrelevant code
}

There are six types through the source code. It is worth mentioning the following two points:

1) The type used in clipOutPath method is DIFFERENCE. In other words, we can use the following code instead to solve the problem that clipOutPath method cannot be used below API26

clipPath(mPath, Region.Op.DIFFERENCE)

2) The type used in the clipPath method is INTERSECT. In other words, we can use the following code instead

clipPath(mPath, Region.Op.INTERSECT)

For example:

Next, we will explain the six types one by one. The two cutting comparisons can reflect the role of the Region.Op parameter, so our next examples need to use two paths:

1. Cardioid path (A in the following example)

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-vtuskehu-1630841978230)( https://user-gold-cdn.xitu.io/2019/4/27/16a5ce605bd1fd35? Imageview2 / 0 / w / 1280 / h / 960 / ignore error / 1)] 2. Circular path (B in the following example)

[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (IMG xegmwnnh-1630841978232)( https://user-gold-cdn.xitu.io/2019/4/27/16a5ce605ee9123d?imageView2/0/w/1280/h/960/ignore -error/1)]

(1)DIFFERENCE

Description: the part of A shape different from B is displayed