Compose笔记(二十五)--Brush

news2025/5/19 9:11:51

        这一节主要了解一下Compose中Brush,在Jetpack Compose里,Brush是一个重要的 API,它用于定义填充图形的颜色渐变或图案,能够为界面元素添加丰富的视觉效果。简单总结如下:

1 常见场景
填充形状(圆形、矩形等)
创建渐变效果
实现纹理或图案
组合多个 Brush

2. 常用 Brush 类型

2.1 纯色填充(SolidColor)
// 直接使用Color作为Brush
drawCircle(color = Color.Red)
// 或显式创建SolidColor Brush
val brush = SolidColor(Color.Blue)
drawRect(brush = brush)

2.2 线性渐变(LinearGradientBrush)
val brush = LinearGradientBrush(
    colors = listOf(Color.Red, Color.Blue),
    start = Offset(0f, 0f), 
    end = Offset(size.width, size.height)  
)
drawRect(brush = brush)

2.3 径向渐变(RadialGradientBrush)
val brush = RadialGradientBrush(
    colors = listOf(Color.Yellow, Color.Transparent),
    center = Offset(size.width / 2, size.height / 2), 
    radius = size.minDimension / 2  // 半径
)
drawCircle(brush = brush, radius = size.minDimension / 2)

2.4 扫描渐变(SweepGradientBrush)
val brush = SweepGradientBrush(
    colors = listOf(Color.Red, Color.Green, Color.Blue),
    center = Offset(size.width / 2, size.height / 2) 
)
drawCircle(brush = brush, radius = size.minDimension / 2)

2.5 图像 Brush(ImageBrush)
val imageBitmap = painterResource(id = R.drawable.example).asImageBitmap()
val brush = ImageBrush(
    image = imageBitmap,
    contentScale = ContentScale.Crop
)
drawRect(brush = brush)

栗子:

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
fun GradientExample() {
    val gradientOffset = remember { Animatable(0f) }

    LaunchedEffect(Unit) {
        launch {
            gradientOffset.animateTo(
                targetValue = 100f,
                animationSpec = infiniteRepeatable(
                    animation = tween(
                        durationMillis = 2000,
                        easing = FastOutSlowInEasing
                    )
                )
            )
        }
    }

    val dynamicGradient = Brush.linearGradient(
        colors = listOf(Color.Red, Color.Yellow),
        start = androidx.compose.ui.geometry.Offset(0f, 0f),
        end = androidx.compose.ui.geometry.Offset(gradientOffset.value, gradientOffset.value)
    )

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(brush = dynamicGradient)
    )
}
import androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import kotlin.math.cos
import kotlin.math.sin

@Composable
fun RainbowGradient() {
    val angle by animateFloatAsState(
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            tween(5000, easing = LinearEasing)
        )
    )

    val colors = listOf(
        Color(0xFFFF0000), // 红
        Color(0xFFFF7F00), // 橙
        Color(0xFFFFFF00), // 黄
        Color(0xFF00FF00), // 绿
        Color(0xFF0000FF), // 蓝
        Color(0xFF4B0082), // 靛
        Color(0xFF9400D3)  // 紫
    )

    Canvas(modifier = Modifier.fillMaxSize()) {
        val radians = angle * (Math.PI / 180).toFloat()
        val width = size.width
        val height = size.height

        val start = Offset(
            x = width / 2 + width / 2 * cos(radians),
            y = height / 2 + height / 2 * sin(radians)
        )

        val end = Offset(
            x = width / 2 - width / 2 * cos(radians),
            y = height / 2 - height / 2 * sin(radians)
        )

        drawRect(
            brush = Brush.linearGradient(
                colors = colors,
                start = start,
                end = end,
                tileMode = androidx.compose.ui.graphics.TileMode.Mirror
            )
        )
    }
}

注意:
1 避免重复创建 Brush 实例:每次重组都创建新的Brush会导致不必要的内存分配和GC压力。使用remember缓存 Brush:

val gradientBrush = remember {
    LinearGradientBrush(
        colors = listOf(Color.Red, Color.Blue),
        start = Offset.Zero,
        end = Offset(size.width, size.height)
    )
}

2 优先使用内置Brush工厂方法直接调用Brush.linearGradient()等方法,避免手动创建子类:

val brush = Brush.linearGradient(colors = listOf(...))

// 不推荐
val brush = LinearGradientBrush(...)

3 对静态内容使用drawWithCache,缓存复杂Brush计算结果,避免重复绘制:

Modifier.drawWithCache {
    val cachedBrush = createComplexBrush()
    onDraw { drawRect(brush = cachedBrush) }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2379167.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Web MVC————入门(3)

今天我们来一个大练习,我们要实现一个登录界面,登录进去了先获取到登录人信息,可以选择计算器和留言板两个功能,另外我们是学后端的,对于前端我们会些基础的就行了,知道ajax怎么用,知道怎么关联…

NC61 两数之和【牛客网】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路3.1 排序双指针3.1 散列 四、参考代码4.1 排序双指针4.2 散列 零、原题链接 NC61 两数之和 一、题目描述 二、测试用例 三、解题思路 3.1 排序双指针 基本思路:   先对序列进行排序,然后…

如何分析动态采样引起的计划不稳定 | OceanBase SQL 调优实践

这篇博客涉及两个知识点,一个是动态采样,另一个是 DAS 执行。 用户的问题和相关结论 我们看看用户在OceanBase 社区论坛发帖中提出的疑问及其所得出的结论。 问题:收集统计信息之前,为什么会出现计划不稳定的情况? …

如何实现RTSP和RTMP低至100-200ms的延迟:直播SDK的技术突破

在实时音视频传输中,低延迟是直播应用的核心技术要求之一。无论是在线教育、远程医疗,还是实时互动直播,延迟过大会影响用户体验,甚至导致应用无法正常使用。大牛直播SDK(SmartMediaKit)在RTSP和RTMP播放器…

symfonos: 2靶场

symfonos: 2 来自 <https://www.vulnhub.com/entry/symfonos-2,331/> 1&#xff0c;将两台虚拟机网络连接都改为NAT模式 2&#xff0c;攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182&#xff0c;靶场IP192.168.23.253 3&…

【图像生成大模型】Step-Video-T2V:下一代文本到视频生成技术

Step-Video-T2V&#xff1a;下一代文本到视频生成技术 引言Step-Video-T2V 项目概述核心技术1. 视频变分自编码器&#xff08;Video-VAE&#xff09;2. 3D 全注意力扩散 Transformer&#xff08;DiT w/ 3D Full Attention&#xff09;3. 视频直接偏好优化&#xff08;Video-DPO…

深度学习推理引擎---ONNX Runtime

一、基础概念 1. 什么是ONNX Runtime&#xff1f; 定位&#xff1a;由微软开发的跨平台推理引擎&#xff0c;专为优化ONNX&#xff08;Open Neural Network Exchange&#xff09;模型的推理性能设计。目标&#xff1a;提供高效、可扩展的推理能力&#xff0c;支持从云到边缘的…

VueUse/Core:提升Vue开发效率的实用工具库

文章目录 引言什么是VueUse/Core&#xff1f;为什么选择VueUse/Core&#xff1f;核心功能详解1. 状态管理2. 元素操作3. 实用工具函数4. 浏览器API封装5. 传感器相关 实战示例&#xff1a;构建一个拖拽上传组件性能优化技巧与原生实现对比常见问题解答总结 引言 在现代前端开发…

【论文阅读】A Survey on Multimodal Large Language Models

目录 前言一、 背景与核心概念1-1、多模态大语言模型&#xff08;MLLMs&#xff09;的定义 二、MLLMs的架构设计2-1、三大核心模块2-2、架构优化趋势 三、训练策略与数据3-1、 三阶段训练流程 四、 评估方法4-1、 闭集评估&#xff08;Closed-set&#xff09;4-2、开集评估&…

vue3 elementplus tabs切换实现

Tabs 标签页 | Element Plus <template><!-- editableTabsValue 是当前tab 的 name --><el-tabsv-model"editableTabsValue"type"border-card"editableedit"handleTabsEdit"><!-- 这个是标签面板 面板数据 遍历 editableT…

Linux的进程概念

目录 1、冯诺依曼体系结构 2、操作系统(Operating System) 2.1 基本概念 ​编辑 2.2 目的 3、Linux的进程 3.1 基本概念 3.1.1 PCB 3.1.2 struct task_struct 3.1.3 进程的定义 3.2 基本操作 3.2.1 查看进程 3.2.2 初识fork 3.3 进程状态 3.3.1 操作系统的进程状…

计算机单个进程内存布局的基本结构

这张图片展示了一个计算机内存布局的基本结构&#xff0c;从低地址&#xff08;0x00000000&#xff09;到高地址&#xff08;0xFFFFFFFF&#xff09;依次分布着不同的内存区域。 代码段 这是程序代码在内存中的存储区域。它包含了一系列的指令&#xff0c;这些指令是计算机执行…

我的电赛(简易的波形发生器大一暑假回顾)

DDS算法&#xff1a;当时是用了一款AD9833芯片搭配外接电路实现了一个波形发生&#xff0c;配合stm32f103芯片实现一个幅度、频率、显示的功能&#xff1b; 在这个过程中&#xff0c;也学会了一些控制算法&#xff1b;就比如DDS算法&#xff0c;当时做了一些了解&#xff0c;可…

算法题(149):矩阵消除游戏

审题&#xff1a; 本题需要我们找到消除矩阵行与列后可以获得的最大权值 思路&#xff1a; 方法一&#xff1a;贪心二进制枚举 这里的矩阵消除时&#xff0c;行与列的消除会互相影响&#xff0c;所以如果我们先统计所有行和列的总和&#xff0c;然后选择消除最大的那一行/列&am…

printf函数参数与入栈顺序

01. printf()的核心功能 作用&#xff1a;将 格式化数据 输出到 标准输出&#xff08;stdout&#xff09;&#xff0c;支持多种数据类型和格式控制。 int printf(const char *format, ...);参数&#xff1a; format&#xff1a;格式字符串,字符串或%开头格式符...&#xff1a;…

仿生眼机器人(人脸跟踪版)系列之一

文章不介绍具体参数&#xff0c;有需求可去网上搜索。 特别声明&#xff1a;不论年龄&#xff0c;不看学历。既然你对这个领域的东西感兴趣&#xff0c;就应该不断培养自己提出问题、思考问题、探索答案的能力。 提出问题&#xff1a;提出问题时&#xff0c;应说明是哪款产品&a…

Go语言语法---输入控制

文章目录 1. fmt包读取输入1.1. 读取单个值1.2. 读取多个值 2. 格式化输入控制 在Go语言中&#xff0c;控制输入主要涉及从标准输入(键盘)或文件等来源读取数据。以下是几种常见的输入控制方法&#xff1a; 1. fmt包读取输入 fmt包中的Scan和Scanln函数都可以读取输入&#xf…

CSS- 4.3 绝对定位(position: absolute)学校官网导航栏实例

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。 HTML系列文章 已经收录在前端专栏&#xff0c;有需要的宝宝们可以点击前端专栏查看&#xff01; 点…

Seata源码—6.Seata AT模式的数据源代理一

大纲 1.Seata的Resource资源接口源码 2.Seata数据源连接池代理的实现源码 3.Client向Server发起注册RM的源码 4.Client向Server注册RM时的交互源码 5.数据源连接代理与SQL句柄代理的初始化源码 6.Seata基于SQL句柄代理执行SQL的源码 7.执行SQL语句前取消自动提交事务的源…

计算机科技笔记: 容错计算机设计05 n模冗余系统 TMR 三模冗余系统

NMR&#xff08;N-Modular Redundancy&#xff0c;N 模冗余&#xff09;是一种通用的容错设计架构&#xff0c;通过引入 N 个冗余模块&#xff08;N ≥ 3 且为奇数&#xff09;&#xff0c;并采用多数投票机制&#xff0c;来提升系统的容错能力与可靠性。单个模块如果可靠性小于…