Shader -> RadialGradient圆心渐变着色器详解

news/2025/1/15 13:42:57/

XML文件

<com.example.myapplication.MyViewxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_gravity="center"android:layout_height="400dp"/>

自定义View代码

kotlin">class MyView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {private var mStartColor = Color.REDprivate var mMiddleColor = Color.BLUEprivate var mEndColor = Color.GREENprivate var mDrawRect = RectF()private var mRadialGradient: RadialGradient? = nullprivate var mDrawPaint = Paint()override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {super.onSizeChanged(w, h, oldw, oldh)mDrawRect = RectF(0f, 0f, w.toFloat(), h.toFloat())mRadialGradient = RadialGradient(mDrawRect.centerX(),mDrawRect.centerY(),min(mDrawRect.width(), mDrawRect.height()) / 4,intArrayOf(mStartColor, mMiddleColor, mMiddleColor, mEndColor),floatArrayOf(0f, 0.3f, 0.7f, 1f),Shader.TileMode.CLAMP)}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)mRadialGradient?.let {mDrawPaint.shader = itcanvas.drawRect(mDrawRect, mDrawPaint)}}
}

RadialGradient线性着色器参数详解

  • RadialGradient线性着色器赋值给Paint画笔,可以使用Canvas画布和Paint画笔绘制具有圆心渐变的内容

两种构造函数

  • 构造函数 1:简单单色渐变
kotlin">public RadialGradient(float centerX, // 渐变中心的 x 坐标float centerY, // 渐变中心的 y 坐标float radius,  // 渐变的半径@ColorInt int centerColor, // 中心颜色@ColorInt int edgeColor,   // 边缘颜色@NonNull TileMode tileMode // 颜色映射方式) {}
  • centerX, centerY: 渐变中心的坐标
  • radius: 渐变的半径,定义渐变从中心到边缘的距离
  • centerColor: 中心颜色,定义渐变开始时的颜色
  • edgeColor: 边缘颜色,定义渐变结束时的颜色
  • tileMode: 颜色映射模式,用于定义渐变在超出半径范围时的行为
    • TileMode.CLAMP: 使用边界颜色填充
    • TileMode.REPEAT: 重复渐变图案
    • TileMode.MIRROR: 镜像重复渐变图案
  • 构造函数 2:复杂多色渐变
kotlin">public RadialGradient(float centerX, // 渐变中心的 x 坐标float centerY, // 渐变中心的 y 坐标float radius,  // 渐变的半径@NonNull @ColorLong long[] colors, // 渐变颜色数组@Nullable float[] stops, // 颜色位置数组@NonNull TileMode tileMode // 颜色映射方式) {}
  • centerX, centerY: 渐变中心的坐标。
  • radius: 渐变的半径,定义渐变从中心到边缘的距离。
  • colors: 定义渐变的颜色数组,至少需要两个颜色。
  • stops: 可选的颜色位置数组,定义每个对应颜色的相对位置(0 到 1 之间的浮点数)。如果为 null,颜色将在渐变中均匀分布。
  • tileMode: 颜色映射模式,用于定义渐变在超出半径范围时的行为
    • TileMode.CLAMP: 使用边界颜色填充
    • TileMode.REPEAT: 重复渐变图案
    • TileMode.MIRROR: 镜像重复渐变图案

渐变中心点(x, y)只决定圆心位置,映射方向永远是圆心向各个角度映射

颜色数组IntArray和位置数组FloatArray决定颜色的数量和位置

  • 起始颜色 mStartColor 和过渡颜色 mMiddleColor 只作用于 [0f, 0.3f] 这个区间
  • 过渡颜色 mMiddleColor 和结束颜色 mEndColor 只作用于 [0.7f, 1f] 这个区间
  • 过渡颜色 mMiddleColor 只作用于 [0.3f, 0.7f] 这个区间
kotlin">mRadialGradient = RadialGradient(mDrawRect.centerX(),mDrawRect.centerY(),min(mDrawRect.width(), mDrawRect.height()) / 4,intArrayOf(mStartColor, mMiddleColor, mMiddleColor, mEndColor),floatArrayOf(0f, 0.3f, 0.7f, 1f),Shader.TileMode.CLAMP
)

在这里插入图片描述

映射方式Shader.TileMode决定着色器绘制区域之外的部分如何绘制

  • 着色器绘制区域就是创建RadialGradient的时候指定的
  • Shader.TileMode.CLAMP
    • 作用:边缘填充,只有结束颜色填充绘制区域之外的部分
kotlin">mRadialGradient = RadialGradient(mDrawRect.centerX(),mDrawRect.centerY(),min(mDrawRect.width(), mDrawRect.height()) / 4,intArrayOf(mStartColor, mMiddleColor, mMiddleColor, mEndColor),floatArrayOf(0f, 0.3f, 0.7f, 1f),Shader.TileMode.CLAMP
)

在这里插入图片描述

  • Shader.TileMode.REPEAT
    • 作用:重复填充,开始颜色和结束颜色一起填充绘制区域之外的部分
kotlin">mRadialGradient = RadialGradient(mDrawRect.centerX(),mDrawRect.centerY(),min(mDrawRect.width(), mDrawRect.height()) / 4,intArrayOf(mStartColor, mMiddleColor, mMiddleColor, mEndColor),floatArrayOf(0f, 0.3f, 0.7f, 1f),Shader.TileMode.REPEAT
)

在这里插入图片描述

  • Shader.TileMode.MIRROR
    • 作用:镜像填充,开始颜色和结束颜色一起填充绘制区域之外的部分
kotlin">mLinearGradient = LinearGradient(mDrawRect.left,mDrawRect.top,mDrawRect.right/2,mDrawRect.top,mStartColor, mEndColor,Shader.TileMode.MIRROR
)

在这里插入图片描述


http://www.ppmy.cn/news/1563330.html

相关文章

CSS中的accent-color如何使用

前言 accent-color是CSS 2022年推出的一个新属性&#xff0c;它能修改input默认控件的颜色&#xff0c;支持的input控件元素包括复选框&#xff08;<input type"checkbox">&#xff09;、单选框&#xff08;<input type"radio">&#xff09;、…

如何选择多个视频文件

文章目录 1. 概念介绍2. 方法与细节2.1 实现方法2.2 具体细节 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何选择多个图片文件"相关的内容&#xff0c;本章回中将介绍如何选择视频文件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在前…

机器学习之过拟合和欠拟合(二)

在机器学习中,过拟合和欠拟合是模型训练中常见的两种问题,它们反映了模型对数据的拟合程度及泛化能力的不足或过剩。 1. 什么是过拟合和欠拟合? 过拟合(Overfitting) 定义:模型对训练数据的学习过于深入,以至于连数据中的噪声或细节都被学到了,导致模型复杂度过高,泛…

在Alpine这小破车里塞进Nginx?

Docker和Nginx&#xff0c;这对黄金CP Docker&#xff0c;大家肯定不陌生了&#xff0c;就是那个能把应用打包成一个个标准化单元的玩意儿。想象一下&#xff0c;你把一个复杂的应用拆分成一个个小盒子&#xff0c;每个盒子就是一个独立的服务&#xff0c;这样一来&#xff0c…

【Redis】初识Redis

目录 Redis简介 Redis在内存中存储数据 Redis数据库中的应用 Redis缓存中的应用 Redis消息中间件 尾言 Redis简介 如下是Redis官网中&#xff0c;对Redis的一段描述 在这段描述中&#xff0c;我们提取如下关键要点&#xff1a; Redis主要用于在内存中存储数据Redis可…

解决winodws server iis 下的php mkdir(): Permission denied 问题

这个问题报错原因是权限不够&#xff0c;解决办法如下&#xff1a; 1.在php安装目录下&#xff0c;打开配置文件php.ini 把upload_tmp_dir 前面的分号去掉。 2.给上传的文件夹添加权限 在网站的相应目录&#xff0c;比如目录为tmp&#xff0c;添加IUSR用户&#xff0c;并给所…

软件测试 —— Selenium常用函数

软件测试 —— Selenium常用函数 操作测试对象点击/提交对象 click()模拟按键输入 send_keys("")清除文本内容 clear() 模拟用户键盘行为 Keys包示例用法 获取文本信息 textget_attribute("属性名称") 获取当前页面标题 title获取当前页面的 url current_u…

【深度学习】神经网络灾难性遗忘(Catastrophic Forgetting,CF)问题

文章目录 1. 什么是灾难性遗忘&#xff1f;2. 为什么会存在灾难性遗忘&#xff1f;2.1 网络权重的更新2.2 没有有效的记忆机制2.3 任务间数据分布差异 3. 目前解决方案3.1 弹性权重保持&#xff08;Elastic Weight Consolidation, EWC&#xff09;3.2 其他方法 1. 什么是灾难性…