Paint API - MaskFilter (mask)

Introduction to this section:

There is such a method in the Paint method of Basic Introduction to Android Tutorial - 8.3.1 Detailed Explanation of Three Drawing Tool Classes:

setMaskFilter(MaskFilter maskfilter)： Set MaskFilter, you can use different MaskFilter to achieve filter effects, such as filtering, stereoscopic, etc.! We generally do not use this MaskFilter directly, but use its two subclasses:

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

EmbossMaskFilter: Specifies the direction of the light source and the ambient light intensity to add an embossing effect. Let’s write an example to try it out~!

Official API documentation:
BlurMaskFilter;
EmbossMaskFilter;

---

1.BlurMaskFilter(blur effect )

What does filter stereo mean? Does anyone know how it works? See the example for the truth:

Code example:

Running renderings:

Implementation code:

Here we create a custom View, Finish drawing inside!

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);          //抗锯齿
        paint.setColor(Color.RED);//画笔颜色
        paint.setStyle(Paint.Style.FILL);  //画笔风格
        paint.setTextSize(68);             //绘制文字大小，单位px
        paint.setStrokeWidth(5);           //画笔粗细

        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);     //关闭硬件加速
    }
}

Okay, from the above code example, we can find that we use this BlurMaskFilter, nothing more than, Instantiate in the constructor:

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

What we can control are these two parameters:

The first parameter: Specifies the radius of the blurred edge;

The second parameter: Specifies the blurry style, optional values ​​​​are:

• BlurMaskFilter.Blur.NORMAL：Inner and outer blur
• BlurMaskFilter.Blur.OUTER：Outer blur
• BlurMaskFilter.Blur.INNER: Internal blur
• BlurMaskFilter.Blur.SOLID: Internal bold, external blur

may still be a little unclear , let’s find a picture to try:

Here we change the blur radius to 50, which will make it more obvious~

---

2. EmbossMaskFilter (embossing effect)

As the title says, add an embossing effect by specifying the direction and intensity of the ambient light source. Similarly, let’s write an example to see the effect:

Code example:

Running renderings:

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 };   // 设置光源的方向
        float light = 0.4f;     //设置环境光亮度
        float specular = 8;     // 定义镜面反射系数
        float blur = 3.0f;      //模糊半径
        EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur);

        Paint paint = new Paint();
        paint.setAntiAlias(true);          //抗锯齿
        paint.setColor(Color.BLUE);//画笔颜色
        paint.setStyle(Paint.Style.FILL);  //画笔风格
        paint.setTextSize(70);             //绘制文字大小，单位px
        paint.setStrokeWidth(8);           //画笔粗细
        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);     //关闭硬件加速
    }
}

From the renderings, we can see some of the effects of EmbossMaskFilter, modifying the light to form a relief effect~The girl’s picture is not obvious, The text shows the texture very clearly! Like BlurMaskFilter, related settings are performed in the construction method!

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

direction: floating point array , used to control the light source direction of the x, y, z axis

ambient: Set the ambient light brightness, between 0 and 1

specular ：Specular reflection coefficient

blurRadius：Blur radius

You can modify these values ​​and try different effects. For example, if I modify the above, it will be another This effect:

//For the sake of clarity, it is changed to green

---

##3. Precautions

When using MaskFilter, please note that when our targetSdkVersion >= 14, MaskFilter It will not have any effect. This is because Android turns on hardware acceleration by default in API 14 and above versions, which fully Using the characteristics of the GPU makes the drawing smoother, but it will consume more memory! Okay, let's turn off hardware acceleration. Just fine, you can turn on or off hardware acceleration at different levels. Generally, it is turned off~

• Application: Add the following to the application node of the configuration file: android:hardwareAccelerated="true"
• Activity: Add it to the activity node of the configuration file android:hardwareAccelerated="false"
• View: Called after obtaining the View object, or set directly in the onDraw() method of the View: view.setLayerType(View.LAYER_TYPE_HARDWARE, null);

---

Sample code download:

MaskFilterDemo.zip

---

Summary of this section:

This section demonstrates an API of Paint,

setMaskFilter(MaskFilter maskfilter), learned The basic usage of the two subclasses of MaskFilter: BlurMaskFilter (blur effect) and EmbossMaskFilter (relief effect), It’s relatively simple. If you learn more, it won’t hurt for us to customize the controls in the advanced part. Okay, that’s all. Thank you~

By the way, I forgot to mention that there is actually a class in the example in the SDK that demonstrates these two usages:

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