MaskFilter for Canvas plotting in Android (source code download)

MaskFilter for Canvas plotting in Android (source code download)

If you are not familiar with Canvas plotting, we strongly recommend that you read the blog "Canvas plotting basics in Android (with source code download)", which describes the Canvas plotting basics in Android in detail. This article focuses on how to use MaskFilter to create Blurred shadows and embossed effects.

We know that the various drawXXX methods in the Canvas determine the shape of the drawn geometric image, while the Paint determines the effect of drawing these images. There is a setMaskFilter method in painting. This method receives a parameter of the MaskFilter type. The MaskFilter has two subclasses: BlurMaskFilter and EmbossMaskFilter, which can be used to draw fuzzy shadows and embossed effects respectively. If the setMaskFilter method of painting is null, it means no MaskFilter is used.

To demonstrate the effects of different maskfilters on Canvas plotting, I made an App with the following interface:

The preceding graphic is drawn using various drawXXX methods of Canvas. There are three RadioButton methods. By default, the current drawing does not use MaskFilter, the second is BlurMaskFilter, and the third is EmbossMaskFilter. Select fried ky "http://www.bkjia.com/kf/web/php/" target = "_ blank" class = "keylink"> PHP4NOmtcRSYWRpb0J1dHRvbrrzo6zPwsPmu + Gz9s/drawing = "Drawing code"> drawing code

No matter which one of the above items is selected, the same code is used to draw the image. The only difference is that the parameter MaskFilter passed to the setMaskFilter of the Paint brush is different. The drawing code is as follows:

@ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas); int offsetX = (int) (10 * density); int canvasWidth = canvas. getWidth ()-offsetX; int canvasHeight = canvas. getHeight (); int count = 7; int deltaY = canvasHeight/(count + 1); int smallDeltaY = deltaY/(count + 1); canvas. translate (offsetX, 0);/* --------------------------- draw text -------------------------- */canvas. translate (0, s MallDeltaY); canvas. drawText (draw text, 0, fontSize, paint);/* ----------------------------- draw point -------------------------- */canvas. translate (0, deltaY + smallDeltaY); int pointDeltaX = canvasWidth/3; // you can specify the paint width. setStrokeWidth (20 * density); // draw a BUTT-type vertex paint. setStrokeCap (Paint. cap. BUTT); canvas. drawPoint (0, 0, paint); // draw a ROUND-type point paint. setStrokeCap (Paint. cap. ROUND); canvas. drawPoint (pointDeltaX, 0, paint); // draw a point painting of the SQUARE type. setStrokeCap (Paint. cap. SQUARE); canvas. drawPoint (pointDeltaX * 2, 0, paint);/* ----------------------------- draw a straight line -------------------------- */canvas. translate (0, deltaY + smallDeltaY); // you can specify the paint width. setStrokeWidth (5 * density); canvas. drawLine (0, 0, canvasWidth, 0, paint);/* --------------------------- draw an arc -------------------------- */canvas. translate (0, deltaY + smal LDeltaY); paint. setStyle (Paint. style. STROKE); RectF arcRecF = new RectF (); arcRecF. left = 0; arcRecF. top = 0; arcRecF. right = deltaY * 2; arcRecF. bottom = deltaY; canvas. drawArc (arcRecF, 225,135, true, paint);/* ----------------------------- draw a rectangle -------------------------- */canvas. translate (0, deltaY + smallDeltaY); paint. setStyle (Paint. style. FILL); canvas. drawRect (0, 0, canvasWidth/2, deltaY/2, Paint);/* --------------------------- draw an elliptical surface ------------------------ */canvas. translate (0, deltaY + smallDeltaY); RectF ovalRecF = new RectF (); ovalRecF. left = 0; ovalRecF. top = 0; ovalRecF. right = deltaY * 2; ovalRecF. bottom = deltaY; canvas. drawOval (ovalRecF, paint);/* ----------------------------- draw Bitmap -------------------------- */if (bitmap! = Null) {canvas. translate (0, deltaY + smallDeltaY); canvas. drawBitmap (bitmap, 0, 0, paint );}}

Briefly describe the above Code:

First, draw the text using the drawText method of Canvas. For details, see the text drawn in the first line.

Then I used the drawPoint method of Canvas to draw points. Note that I used BUTT, ROUND, and SQUARE as the strokeCap to draw three points respectively, and specially set the line width to a large value, this makes it easy to observe. For details, see the three point images drawn in the second row.

Then, a line segment is drawn using the drawLine method of the Canvas, which also gives the line segment a certain line width. See the line segment graph drawn in the third line.

The drawArc method of Canvas is used to draw a fan-shaped Elliptical Arc with a certain line width. For details, see the arc Chart drawn in the fourth line.

Then, a rectangle is drawn using the drawRect method of the Canvas. For details, refer to the drawing on the fifth line.

Then, an oval is drawn using the drawOval method of the Canvas. For details, see the figure drawn in the sixth row.

Finally, use the drawBitmap method of the Canvas to draw a Bitmap. For details, see the figure drawn in the last row.

The purpose of drawing different types of images is to help you better observe how different types of images are affected by different maskfilters. It is the effect of painting when the MaskFilter set for the Paint brush is null, that is, the effect of drawing the image normally.

BlurMaskFilter

When BlurMaskFilter is selected, the Blur shadow effect is created. If the selected style is different, the Blur radius will also affect the effect, as shown in the following figure:

The constructor signature of BlurMaskFilter is:

BlurMaskFilter(float radius, BlurMaskFilter.Blur style)

The preceding two parameters are described as follows:

Radius
First ParameterradiusIt is a float type, indicating a Blur Radius, that is, the Blur Radius of the Shadow. As shown in, the larger the value, the blurrier the image. The smaller the value, the clearer the image.

Style
The second parameter style is enumeration BlurMaskFilter. Blur type,Shadows are divided into inner shadows and outer shadows according to the details. Inner shadows refer to shadows expanding from the outline of the image to the inner side, and the outer shadows refer to shadows expanding from the outline of the image to the outer side. From the shadow perspective, drawing a graph consists of up to three parts: the outer shadow + the image content + the inner shadow., Blur enumeration has four types of values:

NORMAL
When the style is NORMAL, the image content + inner shadow + outer shadow will be drawn at the same time, that is, the NORMAL shadow effect.
In general, when we want to use the shadow effect, we generally choose NORMAL as the style. When the Blur radius of the shadow is 0, the shadow effect is not used. As the Blur radius of the Shadow increases, the image cannot be blurred clearly. You can also find that, no matter how the Blur radius of the shadow changes, the points drawn with BUTT and SQUARE are not affected, and the Bitmap drawn is not affected. You can carefully observe the shadow effect of the image when NORMAL is selected.

INNER
When the style is INNER, the image content + INNER shadow is drawn without the outer shadow.
When the Blur radius of the shadow is 0, it is equivalent to not using the shadow effect. As the Blur radius of the Shadow increases, we can see that the color of the image fades in from the contour line. No matter how the shadow blur radius changes, the points drawn with BUTT and SQUARE are still not affected, and the Bitmap drawn is not affected. You can carefully observe the shadow effect of the image when the INNER is selected.

OUTER
When the style is set to OUTER, only the external shadows are drawn without drawing the image content and inner shadows. That is, the outline is completely blank.
In terms of the interface effect, the image is hollowed out, but the fluorescent light spreads outward. When the Blur radius of the shadow is 0, the outer shadow is almost invisible, and the entire image is basically invisible at this time. As the Blur radius of the Shadow increases, the outer shadow gradually becomes obvious. No matter how the shadow blur radius changes, the points drawn with BUTT and SQUARE are still not affected, and the Bitmap drawn is basically invisible. You can carefully observe the shadow effect of the image when the OUTER is selected.

SOLID
When the style is SOLID, only the outer shadow and the image content are drawn without the inner shadow.
From the interface, because no inner shadow is drawn, the interior of the graphic contour is not virtual. The shadow that is drawn will cause the contour line to blur outward. When the Blur radius of a shadow is 0, it is equivalent to no shadow effect. As the Blur radius of a shadow increases, the shadow effect is obvious. The points drawn with BUTT and SQUARE are still not affected, and the Bitmap drawn is not affected.

Summary:

Different styles affect different parts of the drawing. Regardless of the style, the points of the SQUARE drawn with BUTT and SQUARE as strokeCap are completely unaffected by BlurMaskFilter, but the points of the circle drawn with ROUND as strokeCap will be affected. When NORMAL, INNER, and SOLID are used as the style, the Bitmap drawn is basically unaffected. When OUTER is used as the style, the Bitmap drawn is basically invisible. Therefore, BlurMaskFilter is of little practical use to Bitmap. EmbossMaskFilter

You can use EmbossMaskFilter to create a MaskFilter for the embossed effect, and assign a value to the Paint brush using the setMaskFilter of Paint. Shows the effect:

The constructor signature of EmbossMaskFilter is as follows:

public EmbossMaskFilter (float[] direction, float ambient, float specular, float blurRadius)

Before explaining the above parameters, let's briefly introduce the mechanism of EmbossMaskFilter. The so-called relief effect is actually a simulated lighting effect. The side close to the light looks brighter and the side away from the light looks darker, in this way, the 3D effect of the relief is created through the bright and dark colors. If you are familiar with OpenGL, you may have a better understanding of the Phong illumination model. Generally, a relatively complete illumination model is environment light + diffuse reflection + mirror reflection. EmbossMaskFilter removes the diffuse reflection to simplify parameters and highlight the relief effect. Therefore, the illumination model used by EmbossMaskFilter only includes ambient light and mirror reflection.

The following describes the parameters:

Direction
Direction is a float array that represents the direction of light. It is a vector that contains three values, x, y, and z, the absolute size of these three values is not important, because direction is finally normalized into a unit vector when it is actually used by Android, that is, the vector with a length of 1. The coordinates in ction are defined in the right-hand Coordinate System of the drawn image, as shown in:

If you are familiar with OpenGL development, you must know the right coordinate system. Let's take an elliptical image as an example. The center of the elliptic is the center point of the three-dimensional coordinate system. The x axis is horizontal from the center to the right, and the y axis is vertical from the center to the up. Because the image is in the Android screen, the x and y axes are in the plane of the Android screen. The z axis is perpendicular to the screen through the center of the elliptic, that is, the X axis and Y axis at the same time, and its z axis is directed at us from the screen, that is, the arrow of the z axis and the Half Axis is directed at us. We can adjust the values of x, y, and z in ction through the UI above. The vector from the coordinate origin (0, 0) to (x, y, z) is the illumination direction. For example, when x is 1, y is 0, and z is 0, the light vector is (, 0), indicating that the light just points to the x positive half axis along the negative Half Axis of x, at this time, because the light emits from the negative Half Axis of x to the positive Half Axis of x, the place in the negative Half Axis of x on the elliptic is near the light, and is illuminated, that is, the left side of the elliptic is illuminated, in the x-axis, the image is dark, and the right side of the elliptical image is dark. You can mediate the parameters by yourself, as shown in:

Ambient
Ambient indicates the ambient light factor, float type. The value ranges from 0 to 1. The closer the value is to 0, the darker the ambient light, the closer the value is to 1, and the brighter the ambient light.

Specular
Specular indicates the mirror reflection factor. float type. The value ranges from 0 to 1. A mirror reflection is used to simulate a high-gloss reflection like a mirror. The closer the value is to 0, the stronger the mirror reflection. The place where the light is shining is more likely to show a very white and bright state, that is, the high-gloss effect.

BlurRadius
BlurRadius indicates the Blur radius, float type. The greater the value, the more obvious the blur effect.

Note:

Note that, in GPU hardware acceleration mode, the setMaskFilter of the Paint is not supported by the GPU, so to be able to use the setMaskFilter method normally, we need to use the software rendering mode for the View we want to draw. For more information, see the blog "GPU hardware acceleration control in Android and its limitations in 2D drawing". The related code is as follows:

// To ensure that the setMaskFilter of the paint brush can take effect, we need to disable GPU hardware acceleration for MyView if (Build. VERSION. SDK_INT> = Build. VERSION_CODES.HONEYCOMB) {// The setLayerType method is added to the View from API Level 11. // you can set the myView to plot myView in software rendering mode. setLayerType (View. LAYER_TYPE_SOFTWARE, null );}