Unity基础：图片根据文字内容自适应大小（ContentSizeFitter的使用小技巧）

已于 2022-07-13 14:42:22 修改
阅读量3.4k 收藏 7
点赞数 2
分类专栏： Unity基础 文章标签： 图片和文字的自适应大小
于 2020-03-13 15:10:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fey_fey/article/details/99546740
版权

1、方案一

  • 在父物体（Panel_tiShiKuang）上添加Text和ContentSizeFitter组件，保证父物体的Text内容和子物体（Text）的文字内容一样

  •  Image设置为最大适应，作为文字的背景图片

  • 子物体Text添加ContentSizeFitter组件，是文本框大小自适应文字内容

PS：原理，父物体通过自适应文字内容来改变大小，Image图片根据父物体的大小改变自身大小，然后根据UI层级关系在最新层显示Text的文本内容，以达到背景图片根据文字内容自适应，并且文字显示在背景图片的上面

2、方案二

父物体为背景图，子物体为文本内容，

最终效果：当文本内容增加时，改变Vertical Fit 

Fay_Fey
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【Unity实战篇 】| Unity实现 文本框可以自适应大小，到达最大宽度之后再缩小字体
努力前行，总会成为自己心中的那道光
05-27 1万+
Unity实现 Text文本框可以自适应大小，到达最大宽度之后再缩小字体 需求：在文本框可以自适应大小拉伸的前提下，增加一个最大限制宽度，使其到达最大宽度后 再启用 Best Fit 实现自适应改变文字大小以适应文本框的大小。 在Unity中经常会用到文本组件的自适应大小功能，一般使用HorizontalLayoutGroup和ContentSizeFitter组件配合即可实现文本自适应的效果。
unity组件使用技巧之文字图片自适应
qq_45650527的博客
01-17 1215
使用content size fitter 和 vertical layout group 实现图片和文字的自适应，也就是text的长度和宽度会跟随文字内容进行动态变化，同时如果有图片背景的话，图片背景的宽高也会跟随文字内容的多少进行变化。
Unity3d中UGUI组件精简复盘（十九）ContentSizeFitter组件
qq_1628941121的博客
09-07 930
上一节，我们简单概括了Unity3D编辑器中三大 Layout Group组件的简要介绍。具体详情链接为：Unity3d中UGUI组件精简复盘（十八）Aspect Ratio Fitter 话不多说，我们直接进入正题~ 今天我们简要概括复盘的组件便是Aspect Ratio Fitter组件啦~ ContentSizeFitter组件 自适应大小的一个组件或者自适应内容大小的一个组件 添加方式是与Laout Group在同一个transform，也会搭配Item中添加Layout Element使用 属性
unity UGUI Imange背景自适应文本text
weixin_43737238的博客
12-15 2745
制作一个image背景自适应文字的小功能 1，创建一个Image 2，在Image下创建一个Text 3，给这个创建的Image添加一个组件 Content Size Fitter，并且把组件的Vertical Fit 选择 Preferred Size 。 4，给Image在添加一个组件 Vertical Layout Group ,并且点击组件下 Padding左边的小箭头，打开Paddin...
Unity -UGUI中Text文本框的自动调整，字体大小的自适应调节
mo_qi_qi的博客
08-18 2万+
一.UGUI text框大小固定，里面字体大小随着文字增多逐渐变小的设置（很简单） 1.找到Text组件的Parageraph（段落）组件，在Horizontal Overflow和Vertical Overflow调整你想变化的轴 2.Best Fit的选项卡打开，默认是关闭的，设置最大和最小变化的字体大小。 以上即可完成固定输入框大小，字体变多，字体随着不断变小的情况了。 二.UGUI text框大小不固定，text框随着字数增加逐渐拉长但是字体的大小不变,无背景（需要用到Content S
Unity根据文字内容自动滚动显示最新文字
zouxin_88的专栏
11-29 1685
3.在Content添加组件Vertical Layout Group、Content Size Fitter。2.在Scroll View的Content下创建Text。1.在Canvas下创建一个Scroll View。4.自动下滚，显示最新内容。
关于Unity ContentSizeFitter的坑
weixin_43970896的博客
08-12 1252
UGUI自适应
Unity UGUI组件 InputField 根本文本内容自适应大小
03-26
下载完是一个C#脚本 直接挂到带有InputFeild组件的Obj上就行 Obj的RectTransform min.x max.x pivot.x 都 设置为0
Unity：WEB端发布后运行时窗口自适应浏览器窗口大小（网页内全屏）
05-03
整体来说我们需要修改两个文件，第一个index.html、第... 压缩包内有修改前与修改后的内容。可参考修改！！！ 下面是文章修改链接具体修改可供参考： https://blog.csdn.net/weixin_43392473/article/details/124553861
unity3d靠左横向滚动列表动态自适应大小.unitypackage
05-28
unity3d使用layout组件和scrollrect靠左横向生成滚动列表并动态自适应大小，使用Csharp代码，包含示例场景，代码有注释。
Unity 文字提示，弹出提示，自适应提示内容
06-16
Unity 文字提示，弹出提示，自适应提示内容 动态计算显示的位置和适应内容
Unity打包Webgl端进行 全屏幕自适应
最新发布
06-01
在Unity中将项目打包成WebGL格式，是为了让游戏或应用程序能在网页上运行，而全屏自适应则是提升用户体验的关键因素。本篇文章将详细介绍如何在Unity中实现WebGL端的全屏幕自适应，并关注`index.html`和`style.css`...
小技巧—unity文字自适应text文本框（即日起会不定时更新unity小技巧）
qq_37335907的博客
08-08 6159
文本自适应，在text面板添加Content size fitter组件，按照图片的设置，边框会随着文字的数量变化而增大或减少。 与best fit的区别 best fit 是充满整个文本框，文本框不会变化，只会让文字充满整个文本框。...
unity3d 在UGUI中制作自适应调整大小的滚动布局控件
热门推荐
码农成长日记
02-03 5万+
在游戏中，我们很多地方需要用到scroll content的概念：我们需要一个容器，能够指定布局方式（比如横排排列、竖排排列、网格排列）等。然后我们向其中填充内容，这个容器应该自己能够处理所有的元素布局，包括相关的滚动条等等概念。 一个经典的例子就是制作一个物品栏： 在UGUI中，我们要如何来制作呢？ UGUI原生态提供Scroll Rect Componen
Unity UI Text组件添加contentsizefitter后获取RectTransform宽度
为伴-小白-搬运工
05-22 646
Unity UI Text组件添加contentsizefitter后获取RectTransform宽度
unity ContentSizeFitter刷新不及时,导致自动宽高在下一贞才更新
qq_20902465的博客
04-20 4161
ContentSizeFitter，自适应宽高脚本要在下一帧的时候才会适应宽高。如果想立即生效，可以调用 LayoutRebuilder.ForceRebuildLayoutImmediate(rectTransform); 这里的rectTransform是当前物体的RectTransForm。 此处还有一个问题，就是如果是ContentSizeFitter嵌套，则需要刷新每一个RectTransForm foreach(所有有ContentSizeFitter的子物体) { Layou...
Unity使用ContentSizeFitter组件无法获取大小等属性
boyZhenGui的博客
09-12 1048
ContentSizeFitter组件修改Text大小，不会立刻修改大小，需要等待一帧，立刻获取大小得到的长宽都为0。 可以调用方法UI.LayoutRebuilder.ForceRebuildLayoutImmediate立刻强制重建此组件，在获取大小
Unity UGUI背景图片自适应文字大小
PalmAdorableTiger的博客
07-18 4683
背景的Image加上Layout Group组件和ContentSize组件。 1.Pivot用来锚text的延生的的方向，(0,1)就是朝下。 2.ContentSize就是用来自适应子对象的大小（横向或纵向） 3.LayoutGroup（横向和纵向选适合的LayoutGroup），勾选Child Controls Size就是使用子对象原本的大小不改变。...
unity中 background-image 图片旋转自适应大小
01-11
在Unity中，可以通过修改CSS样式和使用JavaScript来实现背景图片的旋转和自适应大小。下面是一个示例代码： 1. 首先，在index.html文件中找到以下代码： ```html <div id="unityContainer" style="width: 100%; height: 100%;"></div> ``` 将其替换为以下代码： ```html <div id="unityContainer" style="width: 100%; height: 100%; position: relative;"> <div id="backgroundImage" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('your_image_path'); background-size: cover;"></div> </div> ``` 将"your_image_path"替换为你想要设置为背景图片的图片路径。 2. 然后，在TemplateData文件夹下的style.css文件中添加以下代码： ```css #backgroundImage { animation: rotate 10s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` 这段代码将为背景图片添加一个旋转动画效果。 通过以上代码，你可以实现Unity中背景图片的旋转和自适应大小效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值