8.3.3 Paint API - MaskFilter (Mask)

Category Android Basic Tutorial

Introduction:

In the Android Basic Tutorial - 8.3.1 Detailed Explanation of Three Drawing Tool Classes, there is a method in the Paint class:

setMaskFilter(MaskFilter maskfilter): Sets the MaskFilter, which can achieve filter effects such as blurring and embossing by using different MaskFilters! We usually do not directly use MaskFilter but instead use its two subclasses:

BlurMaskFilter: Specifies a blur style and radius to process the edges of the Paint.

EmbossMaskFilter: Specifies the direction of the light source and the intensity of the ambient light to add an embossed effect. Let's write an example to test this out!

Official API Documentation: BlurMaskFilter; EmbossMaskFilter;

1. BlurMaskFilter (Blur Effect)

To see the filter and embossed effects in action, let's look at an example:

Code Example:

Run Effect Image:

Implementation Code:

Here, we create a custom View to handle the drawing!

BlurMaskFilterView.java:

/**
 * Created by Jay on 2015/10/21 0021.
 */
public class BlurMaskFilterView extends View {

    public BlurMaskFilterView(Context context) {
        super(context);
    }

    public BlurMaskFilterView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public BlurMaskFilterView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        BlurMaskFilter bmf = null;
        Paint paint = new Paint();
        paint.setAntiAlias(true);          // Anti-alias
        paint.setColor(Color.RED);         // Paint color
        paint.setStyle(Paint.Style.FILL);  // Paint style
        paint.setTextSize(68);             // Text size in px
        paint.setStrokeWidth(5);           // Stroke width

        bmf = new BlurMaskFilter(10f, BlurMaskFilter.Blur.NORMAL);
        paint.setMaskFilter(bmf);
        canvas.drawText("最喜欢看曹神日狗了~", 100, 100, paint);
        bmf = new BlurMaskFilter(10f, BlurMaskFilter.Blur.OUTER);
        paint.setMaskFilter(bmf);
        canvas.drawText("最喜欢看曹神日狗了~", 100, 200, paint);
        bmf = new BlurMaskFilter(10f, BlurMaskFilter.Blur.INNER);
        paint.setMaskFilter(bmf);
        canvas.drawText("最喜欢看曹神日狗了~", 100, 300, paint);
        bmf = new BlurMaskFilter(10f, BlurMaskFilter.Blur.SOLID);
        paint.setMaskFilter(bmf);
        canvas.drawText("最喜欢看曹神日狗了~", 100, 400, paint);

        setLayerType(View.LAYER_TYPE_SOFTWARE, null);     // Disable hardware acceleration
    }
}

From the above code example, we can see that we use BlurMaskFilter by instantiating it in the constructor:

BlurMaskFilter(10f, BlurMaskFilter.Blur.NORMAL);

We can control these two parameters:

First parameter: Specifies the radius of the blur edge;

Second parameter: Specifies the style of the blur, with options:

BlurMaskFilter.Blur.NORMAL: Blur inside and outside
BlurMaskFilter.Blur.OUTER: Blur outside
BlurMaskFilter.Blur.INNER: Blur inside
BlurMaskFilter.Blur.SOLID: Bold inside, blur outside

To make it clearer, let's try an image:

Here, we changed the blur radius to 50 for a more noticeable effect.

2. EmbossMaskFilter (Embossed Effect)

As the title suggests, by specifying the direction of the ambient light source and its intensity, an embossed effect is added. Let's see an example:

Code Example:

Run Effect Image:

Implementation Code:

/**
 * Created by Jay on 2015/10/22 0022.
 */
public class EmbossMaskFilterView extends View {

    public EmbossMaskFilterView(Context context) {
        super(context);
    }

    public EmbossMaskFilterView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public EmbossMaskFilterView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float[] direction = new float[]{1, 1, 3};   // Set light source direction
        float light = 0.4f;     // Set ambient light brightness
        float specular = 8;     // Define specular reflection coefficient
        float blur = 3.0f;      // Blur radius
        EmbossMaskFilter emboss = new EmbossMaskFilter(direction, light, specular, blur);

        Paint paint = new Paint();
        paint.setAntiAlias(true);          // Anti-alias
        paint.setColor(Color.BLUE);        // Paint color
        paint.setStyle(Paint.Style.FILL);  // Paint style
        paint.setTextSize(70);             // Text size in px
        paint.setStrokeWidth(8);           // Stroke width
        paint.setMaskFilter(emboss);

        paint.setMaskFilter(emboss);
        canvas.drawText("最喜欢看曹神日狗了~", 50, 100, paint);

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_bg_meizi1);
        canvas.drawBitmap(bitmap, 150, 200, paint);

        setLayerType(View.LAYER_TYPE_SOFTWARE, null);     // Disable hardware acceleration
    }
}

From the effect image, we can see some of the EmbossMaskFilter effects. The text clearly shows the embossed lines, while the image of the girl is less obvious. The settings related to EmbossMaskFilter are also done in the constructor.

EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius) parameters are:

direction: Float array to control the light source direction in x, y, z axes ambient: Set ambient light brightness, between 0 and 1 specular: Specular reflection coefficient blurRadius: Blur radius

You can modify these values to try different effects. For example, I changed the above values for another effect:

// Here, for clarity, I changed it to green

3. Notes

When using MaskFilter, note that when targetSdkVersion >= 14, MaskFilter will not work because Android versions above API 14 default to hardware acceleration, which takes advantage of the GPU's features to make drawing smoother but consumes more memory. Well, we can turn off hardware acceleration at different levels, usually by disabling it:

Application: Add in the application node of the configuration file: android:hardwareAccelerated="true"
Activity: Add in the activity node of the configuration file android:hardwareAccelerated="false"
View: Can be called after obtaining the View object, or directly set in the View's onDraw() method: view.setLayerType(View.LAYER_TYPE_HARDWARE, null);

Sample Code Download:

MaskFilterDemo.zip

Summary:

This section demonstrates the Paint API, setMaskFilter(MaskFilter maskfilter), and introduces

the use of BlurMaskFilter and EmbossMaskFilter. Basic usage of MaskFilter subclasses: BlurMaskFilter (blur effect) and EmbossMaskFilter (embossing effect), which are quite simple. Learning more will not harm our advanced custom controls. That's all for now, thank you~

By the way, I forgot to mention that there is a class in the SDK examples demonstrating these two usages:

samples\android-xx\legacy\ApiDemos\src\com\example\android\apis\graphics directory下的：FingerPaint.java file~

-1.0 Android Basic Introduction Tutorial

-1.0.1 2015 Latest Android Basic Introduction Tutorial Table of Contents

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Developing Android APP with Eclipse + ADT + SDK

-1.2.2 Developing Android APP with Android Studio

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial for Basic Local Repository Operations

-1.5.2 Git: Setting Up Remote Repository with GitHub