unity -- 关于文字text和图片image等组件一起居中解决方案

最新推荐文章于 2024-05-31 17:29:02 发布
最新推荐文章于 2024-05-31 17:29:02 发布
阅读量7.7k 收藏 5
点赞数 6
分类专栏： unity 文章标签： unity 解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/YN_TCDJ/article/details/78517065
版权

在实际的应用中，策划提到了一个要求，图片和文本一起居中，在unity中文本简单的居中很容易实现，但是文字加图片确实让我不知所措，在经过大神的指导后，做出了以下的解决方案。

将图片和文字放在一个节点下，在节点上加上组件Content Size Fitter和组件Horizontal Layout Group，这两个组件，原理就是让文字的文本框随着字数增加而增加长度，父节点的宽度是根据所有子节点的宽度之和来决定的，这样就实现了文字和图片居中的要求。具体参数设置如下，参数意义看官方文档【这种方式有一个问题，要注意子节点的大小必须保持1，不能放大缩小】

 

 

IYN
关注
专栏目录
【Unity之FGUI】Fairy GUI一篇四万字详解，快来收藏~！
秩沅
06-13 5516
>**FairyGUI是一款用于创建用户界面的UI编辑器和引擎**它提供了丰富的UI组件、动画效果、布局管理、事件处理等功能，能够快速构建各种复杂的用户界面。 **FairyGUI具有跨平台的特性**，支持主流的桌面、移动平台以及网页应用程序。它的编辑器提供了可视化的界面设计工具，用户可以通过拖拽和配置属性来创建和调整UI元素。同时，FairyGUI还提供了强大的动画编辑功能，可以创建丰富的过渡效果和交互动画。 **FairyGUI还具备良好的性能表现**，它使用了高效的渲染技术和资源压缩算法，能够
Unity2D案例学习——背包系统制作（ScriptableObject）
qq_42896549的博客
04-01 7975
01 简介 该学习案例来自b站up主M_Studio的系列视频背包系统，此篇博客为案例学习笔记
unity ContentSizeFitter图片文字居中
ragged的专栏
06-07 436
解决这个问题需要在上一层再加个ContentSizeFitter，去管制上一层的宽度，Rect transform center修改为居中。我这边设置为下边居中。些时文本会根据数字长度改变宽度，编辑的时候并不会出错，但是运行起来后发现，文字会跑到图片上面，叠加在一起。游戏制作过程中常碰到图片与文字一起居中，文字会改变，此时需要用到组件ContentSizeFitter。外层不加ContentSizeFitter时的效果。
Unity_图片与文字宽度变化时整体居中
weixin_43970896的博客
08-26 698
using UnityEngine; using UnityEngine.UI; public class ImageTextSelfAdaption : MonoBehaviour { public Image m_aImage;//图片 public Text m_aText;//文字 float m_aImageWidth;//改变之前的图片宽度 float m_aTextWidth;//改变之前的文字宽度 float time;//改变时间隔time秒调整
UIImageView的图片居中问题
热门推荐
zhoutao198712的专栏
04-05 6万+
我们都知道在ios中，每一个UIImageView都有他的frame大小，但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢？在默认情况，图片会被压缩或者拉伸以填满整个区域。 通过查看UIView的属性可以知道，view的contentMode属性可以用来控制图片的显示情况。下面的设置可以让图片进行居中显示。 imageView.contentMode = UIVie
Unity：物体居中操作
科技向善
03-02 2832
或者在Hierarchy面板点击相应的对象，按住Shift + F
text mesh pro html,TextMesh Pro Emoji Align With Text(表情和文字对齐)
weixin_34809240的博客
06-18 469
前言MMO游戏中需要富文件组件，大体功能包括图文混排，表情，超链接，文字动画等富文本功能，且DC数占用少。本文选择Unity免费提供的TextMesh Pro 解决方案。软件环境Unity3D 5.3.7p4TextMesh Pro 1.0.555.0b11(Jul 06.2017)TexturePack 3.xTextMeshPro文档和资料此插件之前是收费的，但Unity把它收购了，目前免费提...
Unity中关于ScrollRect组件完整解决方案(ScrollRect中元素自动排版+ScrollRect中元素自动定位到Viewport可见范围内)
虚粒世界
02-18 2391
Unity中关于ScrollRect组件完整解决方案(ScrollRect中元素自动排版+ScrollRect中元素自动定位到Viewport可见范围内)
unity游戏开发学习笔记
qq_29231163的博客
09-02 1万+
unity note： 游戏和三维互动内容开发工具，专业游戏引擎 游戏引擎： 一款游戏最核心的代码 包含： 渲染引擎，物理引擎、碰撞检测，音效、脚本引擎、动画系统 人工智能、网络引擎、场景管理。 游戏公司分工 策划、美工、软件工程师、测试工程师、客服 首月： day1： 环境搭建、C#语言基础、Unity API、物理引擎1、3D数学基础、UGUI 程序界面 Project->Assets文件 Hierarchy-> 对象 Scene 右键旋转 滚轮->前进后退 F键—&gt
2021-11-08FGUI 使用
kings_zqz的专栏
11-08 4453
UIPackage.getItemURL(“包名“，“资源名”) AudioClip clip = (AudioClip)UIPackage.GetItemAsset(“包名称”,”声音名称”); 菜单”编辑”->“创建位图字体”，（输入字符，显示对应图片） 多信息文本(GRichTextField)支持链接和图文混排。 用例： aTextField.text = “请去找王大锤”; 列表 （GList） AddChild : 增加一个项目。 AddChildAt ：在指定的位置增加一个项目。 Rem
关于UIImageView的显示问题——居中显示或者
u010850094的博客
06-14 1909
我们都知道在ios中，每一个UIImageView都有他的frame大小，但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢？在默认情况，图片会被压缩或者拉伸以填满整个区域。 通过查看UIView的属性可以知道，view的contentMode属性可以用来控制图片的显示情况。下面的设置可以让图片进行居中显示。 imageView.contentMode =  UIViewConte
uniapp image标签图片不会居中显示
xjh01的博客
09-05 7084
用image标签时，图片是自动靠左，如果图片不足够大的话，右边就会有空白。 系统默认的是 uni-image { display: inline-block; } 可见是行内块 这个时候在自己的页面下，配置css 可以转换为 display:block 然后margin： 0 auto； 这样就能实现居中了 ...
使用文字对齐中心使图片居中？
w36680130的博客
05-01 405
Is the property text-align: center; 该属性是否为text-align: center; a good way to center an image using C
Unity中提升像素字体清晰度
weixin_30393907的博客
05-04 1720
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具：Unity5.6.0f3 Unity UI系统是非常好的，但默认情况下，使用像像素艺术风格游戏那样需要非常锋利的边框的字体时，它不会很好地运行。虽然字体看起来很好，但仔细检查时，字符的边缘稍微模糊，有时字符看起来很差。在下面的图片中，如果您仔细观察，您可以看到字符边缘周围的一些模糊。 ...
uniapp中图片不居中问题
imkaifan的博客
04-25 9757
uni-image { display: inline-block; } 可见是行内块 可以转换为 display:block 然后margin： 0 auto；
关于 text-align: center 设置后文字位置不在中间的原因及解决方法
成长之路，任重道远，期待你的关注！
01-12 6471
关于 text-align: center 设置后文字位置不在中间的原因及解决方法 先说解决方法，给元素设置display：inline-block ， 首先，我们得清楚text-align: center 设置后的作用效果，这个属性设置后会使标签中的文字居中排布，也包括标签的后代元素里的文字居中，即样式的继承。 简单了解后我们直接看问题，在开发或者日常练习中会遇到图片中的情况， 设置样式后文字的位置并不是居中，而是中间偏左一点。这时候检查后发现是浏览器默认样式，（我这里用的footer标签，块级元素）
unity关于点击按钮后居中显示文字并暂停游戏
最新发布
qq_35329382的博客
05-31 257
2、用TextMeshProUGUI这个东西，声明一个displayTex的变量和一个textMeshPr变量。第一个canvas、buttton是第一层，第二个canvas、text是第二层。displayTex控制居中显示文字，textMeshPr控制按钮的文字。1、需要用到的：TextMeshProUGUI、Button、一、需要的部件：canvas、textmeshpro。4、然后写暂停方法，放暂停按钮方法的里面。3、设置默认、一般在start方法做。二、调整TEXT的位置，放在居中。
Unity-添加图片/文字
WWeixq的博客
10-25 3753
2.选中图像，在Inspector中设置Texture Type为Spirit(2D and UI)4.将图片拖入Image的Ispector-Image-Source Image。此时，图片已经进入场景，可以对它的位置及大小进行改变。3.在Hierarchy中右击选择UI-Image。1.先把图片放入Assets里。
Unity Ugui 实现 列表item居中放大效果
qq_37775368的博客
06-23 2557
通过拖拽或者点击图片 使图片居中放大使用scroll view组件 并为子节点conter添加 Grid layout Group 组件实现逻辑记录每个item到scroll中心点的距离的数据在拖拽过程中 通过当前conter的localpostion位置 去判断离中心点距离最短的item找到对应item 让conter的localpostion通过插值lerp 移动到对应的位置 使其item居中并缩放水平拖拽 这里知晓localpostion关于x的信息即可垂直拖拽 即y。 在拖拽接口中不断实
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值