自定义控件（7）---BlurMaskFilter边界阴影

2024-08-31 23:32
文章标签 自定义 控件 边界 阴影 blurmaskfilter

本文主要是介绍自定义控件（7）---BlurMaskFilter边界阴影，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Android中的很多自带控件都有类似软阴影的效果，比如说Button，使用BlurMaskFilter就可以得到类似的效果


activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFFFFF"android:orientation="vertical" ><com.aigestudio.customviewdemo.views.MaskFilterViewandroid:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout>

MeasureUtil 

package com.aigestudio.customviewdemo.utils;import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.util.DisplayMetrics;public final class MeasureUtil {public static int[] getScreenSize(Activity activity) {DisplayMetrics metrics = new DisplayMetrics();activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);return new int[] { metrics.widthPixels, metrics.heightPixels };}}

MainActivity 

package com.aigestudio.customviewdemo.activities;import android.app.Activity;
import android.os.Bundle;import com.aigestudio.customviewdemo.R;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}
}

MaskFilterView 

package com.aigestudio.customviewdemo.views;import android.app.Activity;
import android.content.Context;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;import com.aigestudio.customviewdemo.utils.MeasureUtil;public class MaskFilterView extends View {private static final int RECT_SIZE = 800;private Paint mPaint;// 画笔private Context mContext;// 上下文环境引用private int left, top, right, bottom;//public MaskFilterView(Context context) {this(context, null);}public MaskFilterView(Context context, AttributeSet attrs) {super(context, attrs);mContext = context;// 初始化画笔initPaint();// 初始化资源initRes(context);/*** 如果可以只针对某个View关闭硬件加速那岂不是很好么？当然，Android也给我们提供了这样的功能，我们可以在View中通过*/setLayerType(LAYER_TYPE_SOFTWARE, null);}/*** 初始化画笔*/private void initPaint() {// 实例化画笔mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);mPaint.setStyle(Paint.Style.FILL);mPaint.setColor(0xFF603811);/*** radius很容易理解，值越大我们的阴影越扩散* SOLID，其效果就是在图像的Alpha边界外产生一层与Paint颜色一致的阴影效果而不影响图像本身* NORMAL会将整个图像模糊掉* OUTER会在Alpha边界外产生一层阴影且会将原本的图像变透明* INNER则会在图像内部产生模糊*/mPaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.SOLID));}/*** 初始化资源*/private void initRes(Context context) {/** 计算位图绘制时左上角的坐标使其位于屏幕中心*/left = MeasureUtil.getScreenSize((Activity) mContext)[0] / 2- RECT_SIZE / 2;top = MeasureUtil.getScreenSize((Activity) mContext)[1] / 2 - RECT_SIZE/ 2;right = MeasureUtil.getScreenSize((Activity) mContext)[0] / 2+ RECT_SIZE / 2;bottom = MeasureUtil.getScreenSize((Activity) mContext)[1] / 2+ RECT_SIZE / 2;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.GRAY);// 画一个矩形//(float left, float top, float right, float bottom, Paint paint)canvas.drawRect(left, top, right, bottom, mPaint);}
}

或者下面的方法也可以实现

package com.aigestudio.customviewdemo.views;import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;import com.aigestudio.customviewdemo.utils.MeasureUtil;@SuppressLint("NewApi")
public class ShadowView extends View {private static final int RECT_SIZE = 800;// 方形大小private Paint mPaint;// 画笔private int left, top, right, bottom;// 绘制时坐标public ShadowView(Context context, AttributeSet attrs) {super(context, attrs);// setShadowLayer不支持HWsetLayerType(LAYER_TYPE_SOFTWARE, null);// 初始化画笔initPaint();// 初始化资源initRes(context);}/*** 初始化画笔*/private void initPaint() {// 实例化画笔mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mPaint.setColor(Color.RED);mPaint.setStyle(Style.FILL);//radius表示阴影的扩散半径，而dx和dy表示阴影平面上的偏移值，shadowColor就不说了阴影颜色mPaint.setShadowLayer(60, 3, 3, Color.DKGRAY);}/*** 初始化资源*/private void initRes(Context context) {/** 计算位图绘制时左上角的坐标使其位于屏幕中心*/left = MeasureUtil.getScreenSize((Activity) context)[0] / 2 - RECT_SIZE/ 2;top = MeasureUtil.getScreenSize((Activity) context)[1] / 2 - RECT_SIZE/ 2;right = MeasureUtil.getScreenSize((Activity) context)[0] / 2+ RECT_SIZE / 2;bottom = MeasureUtil.getScreenSize((Activity) context)[1] / 2+ RECT_SIZE / 2;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 先绘制位图canvas.drawRect(left, top, right, bottom, mPaint);}
}


如上所说BlurMaskFilter是根据Alpha通道的边界来计算模糊的，如果是一张图片（注：上面我们说过Android会把拷贝到资源目录的图片转为RGB565，具体原因具体分析我会单独开一篇帖子说，这里就先假设所有提及的图片格式为RGB565）你会发现没有任何效果，那么假使我们需要给图片加一个类似阴影的效果该如何做呢？其实很简单，我们可以尝试从Bitmap中获取其Alpha通道，并在绘制Bitmap前先以该Alpha通道绘制一个模糊效果不就行了？

如下面代码所示我们通过Bitmap的extractAlpha()方法从原图中分离出一个Alpha通道位图并在计算模糊滤镜的时候使用该位图生成模糊效果：

BlurMaskFilterView

package com.aigestudio.customviewdemo.views;import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;import com.aigestudio.customviewdemo.R;
import com.aigestudio.customviewdemo.utils.MeasureUtil;public class BlurMaskFilterView extends View {private Paint shadowPaint;// 画笔private Context mContext;// 上下文环境引用private Bitmap srcBitmap, shadowBitmap;// 位图和阴影位图private int x, y;// 位图绘制时左上角的起点坐标public BlurMaskFilterView(Context context) {this(context, null);}public BlurMaskFilterView(Context context, AttributeSet attrs) {super(context, attrs);mContext = context;// 记得设置模式为SOFTWAREsetLayerType(LAYER_TYPE_SOFTWARE, null);// 初始化画笔initPaint();// 初始化资源initRes(context);}/*** 初始化画笔*/private void initPaint() {// 实例化画笔shadowPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);shadowPaint.setColor(Color.DKGRAY);//outer solid normal 都可以  但是inner不行shadowPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.NORMAL));}/*** 初始化资源*/private void initRes(Context context) {// 获取位图srcBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.a);// 获取位图的Alpha通道图shadowBitmap = srcBitmap.extractAlpha();/** 计算位图绘制时左上角的坐标使其位于屏幕中心*/x = MeasureUtil.getScreenSize((Activity) mContext)[0] / 2 - srcBitmap.getWidth() / 2;y = MeasureUtil.getScreenSize((Activity) mContext)[1] / 2 - srcBitmap.getHeight() / 2;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 先绘制阴影canvas.drawBitmap(shadowBitmap, x, y, shadowPaint);// 再绘制位图canvas.drawBitmap(srcBitmap, x, y, null);}
}


这篇关于自定义控件（7）---BlurMaskFilter边界阴影的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1125306。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局，其中 label 控件位于 image 控件下方，你可以使用 lv_obj_set_flex_flow 来设置布局为垂直，并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例： 创建父容器：首先创建一个容器对象，该对象将作为布局的基础。设置容器为垂直布局：使用 lv_obj_set_flex_flow 设置容器
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
UE5 半透明阴影 快速解决方案

UE5 半透明阴影 快速解决方案

Step 1： 打开该选项 Step 2： 将半透明材质给到模型后，设置光照的Shadow Resolution Scale，越大，阴影的效果越好
阅读更多...
一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明： 首次发表日期：2024-09-08PlantUML官网： https://plantuml.com/zh/PlantUML命令行文档： https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi
阅读更多...
argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

一、问题描述 一位同学反馈，他写的argo存过中调用了一个自定义函数，函数会加载hdfs上的一个文件，但有些节点会报FileSystem closed异常，同时有时任务会成功，有时会失败。 二、问题分析 argodb的计算引擎是基于spark的定制化引擎，对于自定义函数的调用跟hive on spark的是一致的。udf要通过反射生成实例，然后迭代调用evaluate。通过代码分析，udf在
阅读更多...
小程序button控件上下边框的显示和隐藏

小程序button控件上下边框的显示和隐藏

问题 想使用button自带的loading图标功能，但又不需要button显示边框线 button控件有一条淡灰色的边框，在控件上了样式 border:none; 无法让button边框隐藏 代码如下： <button class="btn">.btn{border:none; /*一般使用这个就是可以去掉边框了*/} 解决方案 发现button控件有一个伪元素（::after
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2