Android custom View step pit notes, special composition records

I won’t go into the details of what the ↑ and ↑ methods are used to do when the Android Paint class is used for customizing a View, but I think you should be familiar with them, but in summary you can use them to add shadows and glow effects to things you want to Paint. Luminous effects We only discuss internal and external luminous effects here.

As you all know, both of these methods need to be turned off for hardware acceleration to work in most scenarios. Sometimes we need to apply a shadow or glow effect to a Bitmap. In this case, the UI will cut a small icon for you with a large circle of pure transparent pixels around the edge. In this case, you may find that setting the above two functions for Paint will not give you the desired effect.

The problem is that the edge of the cut image has pure transparent pixels.

Let’s go straight to the picture above and see what it looks like.

For example, I have a picture that looks like this:

This is a preview of the image after I opened it from AS. Note the large circle of transparent pixels around its edge. When we draw this image we want to give it a shadow effect:

mArcPaint.setShadowLayer(20, dp2px(15), dp2px(15), Color.parseColor("# 333333"));//dp2px
canvas.drawBitmap(mArrow, matrix, mArcPaint);//mArrow are the Bitmap objects we want to draw
mArcPaint.clearShadowLayer();
Copy the code

Here’s what it looks like on canvas:

Let’s set the blur radius to 0:

mArcPaint.setShadowLayer(0, dp2px(15), dp2px(15), Color.parseColor("# 333333"));//dp2px
canvas.drawBitmap(mArrow, matrix, mArcPaint);//mArrow are the Bitmap objects we want to draw
mArcPaint.clearShadowLayer();
Copy the code

It will look like this:

Look at the original picture!

Now let’s change the original image to something like this:

Well, there are no pure transparent pixels around, then change the blur radius to larger:

mArcPaint.setShadowLayer(128, dp2px(15), dp2px(15), Color.parseColor("# 333333"));//dp2px
canvas.drawBitmap(mArrow, matrix, mArcPaint);//mArrow are the Bitmap objects we want to draw
mArcPaint.clearShadowLayer();
Copy the code

Now the drawing on the canvas looks like this:

Believe me, the above is clear!

The same is true when the glow effect is not drawn.

The glow setup code looks something like this:

mArcPaint.setMaskFilter(new BlurMaskFilter(dp2px(4), BlurMaskFilter.Blur.NORMAL));// Do not use new objects in onDraw function in production environment! Will the OOM
canvas.drawBitmap(mArrow, matrix, mArcPaint);
mArcPaint.setMaskFilter(null);
Copy the code

The original:

Inner and outer glow effects painted onto canvas:

To the end.