godot--自定义边框/选中时样式 StyleBoxTexture

news2024/11/12 21:41:42

前提知识:

stylebox就像一个贴图,把图案贴到控件是。多个stylebox同时生效的话,那当然也有层级之分,上层覆盖下层(可以设置透明度来显示下层)

关于主题的概念:

godot——主题、Theme、StyleBox-CSDN博客

一、素材与实现效果

下面是我准备的图片,和期望的效果 。目标控件是 itemlist

 

二、实现步骤

1. 添加在 selected focus 状态时的样式,新建 styleboxTexture 

2. 然后载入图片

3. 然后调整Texture Margins (TM) 属性,使箭头图案出现在九宫格的边缘

通常来说,只需设置TMTexture这两个属性就够用了。

下面附上说明图解(不用关注其它属性的改动)

图1

下面是更干净的图,真的只修改了这两个属性

图 2

Tips: 在将 stylebox 贴到 item 上时  1379 号格子不会被拉伸;号格子会被完全拉伸;28 号格子只会被水平拉伸;46 号格子只会被垂直拉伸。

三、一些会遇到的坑

下面的回答,为了方便理解,有一些细节方面的问题。相信在实践过程中会自行克服。

Q1.在预览页面中,我的图标还是变形了呀。就像图2中所示。

A1. 不用管它,只要保证图标在边框内部即可。因为最后效果是要根据你的实际itemlist控件的item大小来定的。

Q2. 我如Q1所说,保证了图标在边框内部,但实际效果还是被拉长变形了呀,达不到目标效果。

A2. 这是因为 itemlist 中的 item 的行高只有 10px ,而图案的高度有 20px 。为了把九宫格stylebox贴到item上,只能把它压扁了。想要解决也很简单:1. 把图案等比缩小到高度只有10px以下  2. 增大item的行高到20px以上。

Q3. 可以讲讲你 图1 中的预览效果里,为什么有两个箭头图案吗。

A3. 这是 Axis Stretch 属性在作怪。Axis Stretch 规定了当尺寸不匹配时,应该怎么做。像Q2中提到的那种情况,处于6号格子的图案的高度,与item的高度不一致,根据stretch模式,他就被压缩了。  还有一种Tile模式,即平铺模式。该模式下,若item高度小于图案高度,则会把图案“截断”(如0.8个箭头);反之,则会把图案复制一份并平铺(如2.4个箭头)

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

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

相关文章

ReactPress 安装指南:从 MySQL 安装到项目启动

ReactPress Github项目地址:https://github.com/fecommunity/reactpress 欢迎Star。 ReactPress 是一个基于 React 的开源发布平台,适用于搭建博客、网站或内容管理系统(CMS)。本文将详细介绍如何安装 ReactPress,包括…

BMC运维管理:IPMI实现服务器远控制

IPMI实现服务器远控制 实操一、使用IPMI重置BMC用户密码实操二、使用IPMI配置BMC的静态IP实操三、IPMI实现BMC和主机控制操作实操四、ipmitool查看服务器基本信息实操五、ipmitool实现问题定位BMC(Baseboard Management Controller,基板管理控制器)是服务器硬件的一个独立管…

手机上用什么方法可以切换ip

手机上用什么方法可以切换IP?在某些特定情境下,用户可能需要切换手机的IP地址,以满足网络安全、隐私保护或绕过地域限制等需求。下面以华为手机为例,将详细介绍手机IP地址切换的几种方法,帮助用户轻松实现这一目标。 一…

鸿蒙多线程开发——并发模型对比(Actor与内存共享)

1、概 述 并发是指在同一时间段内,能够处理多个任务的能力。为了提升应用的响应速度与帧率,以及防止耗时任务对主线程的干扰,HarmonyOS系统提供了异步并发和多线程并发两种处理策略。 异步并发:指异步代码在执行到一定程度后会被…

【NLP】使用 PyTorch 从头构建自己的大型语言模型 (LLM)

读完这篇文章后,你会取得什么成就?你将能够自己构建和训练大型语言模型 (LLM),同时与我一起编写代码。虽然我们正在构建一个将任何给定文本从英语翻译成马来语的 LLM,但你可以轻松地修改此 LLM 架构以用于其他语言翻译任务。 LLM…

css:还是语法

emmet的使用 emmet是一个插件&#xff0c;Emmet 是 Zen Coding 的升级版&#xff0c;由 Zen Coding 的原作者进行开发&#xff0c;可以快速的编写 HTML、CSS 以及实现其他的功能。很多文本编辑器都支持&#xff0c;我们只是学会使用它&#xff1a; 生成html结构 <!-- emme…

YOLO即插即用---PConv

Run, Don’t Walk: Chasing Higher FLOPS for Faster Neural Networks 论文地址&#xff1a; 1. 论文解决的问题 2. 解决问题的方法 3. PConv 的适用范围 4. PConv 在目标检测中的应用 5. 评估方法 6. 潜在挑战 7. 未来研究方向 8.即插即用代码 论文地址&#xff1a; …

小白NAS磁盘规划实践:一次科学、高效的存储旅程

引言 如今,数字化生活正逐步渗透到我们生活的方方面面。从家庭影音到工作文件,从珍贵的照片到大型游戏库,数据的存储需求日益增加。许多朋友开始关注NAS(网络附加存储)设备。作为一个专为数据存储和管理设计的系统,NAS能为我们提供安全、高效的存储方案。但如何科学地规…

ADC前端控制与处理模块--AD7606_Module

总体框架 AD7606_Module主要由3个模块组成组成&#xff0c;AD7606_Data_Pkt和AD7606_Drive以及AD7606_ctrl。 1.AD7606_Data_Pkt主要作用是把AD芯片数据组好数据包&#xff0c;然后发送给上位机&#xff1b; 2.AD7606_Drive主要负责和芯片的交互部分 3.AD7606_ctrl控制模块的作…

注意力机制篇 | YOLO11改进 | 即插即用的高效多尺度注意力模块EMA

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。与传统的注意力机制相比&#xff0c;多尺度注意力机制引入了多个尺度的注意力权重&#xff0c;让模型能够更好地理解和处理复杂数据。这种机制通过在不同尺度上捕捉输入数据的特征&#xff0c;让模型同时关注局部细节和全局…

dell服务器安装ESXI8

1.下载镜像在官网 2.打开ipmi&#xff08;idrac&#xff09;&#xff0c;将esxi镜像挂载&#xff0c;然后服务器开机 3.进入bios设置cpu虚拟化开启&#xff0c;进入boot设置启动选项为映像方式 4..进入安装引导界面3.加载完配置进入安装 系统提示点击继 5.选择安装磁盘进行…

Linux -- 操作系统(软件)

目录 什么是操作系统&#xff1f; 计算机的层状结构 为什么要有操作系统 操作系统到底层硬件 驱动程序 操作系统如何管理硬件&#xff1f; 操作系统到用户 系统调用接口 库函数 回到问题 什么是操作系统&#xff1f; 操作系统&#xff08;Operating System&#xf…

【大数据算法】MapReduce算法概述之:MapReduce基础模型

MapReduce基础模型 1、引言2、MapReduce基础模型2.1 定义2.2 核心原理2.3 优点2.4 缺点2.5 局限性2.6 实例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;鱼哥&#xff0c; 不得了啊 小鱼&#xff1a;啥事情这么慌慌张张的 小屌丝&#xff1a;这不是慌张啊 小鱼&#x…

深入解析 Transformers 框架(四):Qwen2.5/GPT 分词流程与 BPE 分词算法技术细节详解

前面我们已经通过三篇文章&#xff0c;详细介绍了 Qwen2.5 大语言模型在 Transformers 框架中的技术细节&#xff0c;包括包和对象加载、模型初始化和分词器技术细节&#xff1a; 深入解析 Transformers 框架&#xff08;一&#xff09;&#xff1a;包和对象加载中的设计巧思与…

商品详情 API 接口的返回结果通常包含哪些信息?

商品详情 API 接口的返回结果通常包含以下几类信息&#xff1a; 一、商品基本信息&#xff1a; 商品 ID&#xff1a;唯一标识商品的编号&#xff0c;在电商平台的数据库中具有唯一性&#xff0c;用于区分不同的商品。商品标题&#xff1a;对商品的简要描述&#xff0c;通常包…

探索 Seata 分布式事务

Seata&#xff08;Simple Extensible Autonomous Transaction Architecture&#xff09;是阿里巴巴开源的一款分布式事务解决方案&#xff0c;旨在帮助开发者解决微服务架构下的分布式事务问题。它提供了高效且易于使用的分布式事务管理能力&#xff0c;支持多种事务模式&#…

AI写作(七)的核心技术探秘:情感分析与观点挖掘

一、AI 写作中的关键技术概述 情感分析与观点挖掘在 AI 写作中起着至关重要的作用。情感分析能够帮助 AI 理解文本中的情感倾向&#xff0c;无论是正面、负面还是中性。在当今信息时代&#xff0c;准确把握用户情绪对于提供个性化体验和做出明智决策至关重要。例如&#xff0c;…

容器化技术入门:Docker详解

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 容器化技术入门&#xff1a;Docker详解 容器化技术入门&#xff1a;Docker详解 容器化技术入门&#xff1a;Docker详解 引言 Doc…

Flutter运行App时出现“Running Gradle task ‘assembleDebug“问题解决

在参考了众多解决办法中最有用并且最快的方法 Gradle Distributions 在这个地方下载对应你这个文件中的gradle版本 然后将 最后一行本来不是这样的,我们把下载好的zip包保存到本地,然后用这个代替网址,最后成功运行

Spark中的shuffle

Shuffle的本质基于磁盘划分来解决分布式大数据量的全局分组、全局排序、重新分区【增大】的问题。 1、Spark的Shuffle设计 Spark Shuffle过程也叫作宽依赖过程&#xff0c;Spark不完全依赖于内存计算&#xff0c;面临以上问题时&#xff0c;也需要Shuffle过程。 2、Spark中哪…