UGUI图片跟随文本框长度改变位置

最新推荐文章于 2022-12-08 18:01:09 发布
最新推荐文章于 2022-12-08 18:01:09 发布
阅读量2.7k 收藏 2
点赞数 1
分类专栏： unity UGUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33205561/article/details/81738609
版权
unity 同时被 2 个专栏收录
78 篇文章 3 订阅
订阅专栏
UGUI
16 篇文章 0 订阅
订阅专栏

这次要完成一个功能，需要钻石图标跟随数字的长度改变位置。
之前使用了Layout Group排版，在数字改变的时候会出现一点小问题。

这次使用锚点去进行跟随

这里写图片描述
设置文本框的属性，使其从右往左排版
并添加ContentSizeFitter组件，使其能根据数字长短来缩放大小

这里写图片描述

图标作为子物体挂入文本框

这里写图片描述

按住ALT设置子物体的锚点，使其作为根据文本框的最左端改变，并不进行缩放

这样数字修改的时候，图标就可以根据数字的长度自己改变位置了

yqian1000
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
unity UI随着文字长度改变UGUI text的长度 C#获取字符串的英文长度。
qq_23154467的博客
12-13 1508
本文会为大家介绍关于UGUI的使用中，经常会用到的UI框的长度要随着文本长度变化的功能。 首先说下我的做法：  我制作了一个带有底色背景的文本框，类似途中这样的结构。 info是一个image infotext是一个文本框 将infotext的stretch固定。为四个点做锚点是为了上下左右都会改变的情况 下文只会介绍左右的例子，上下框改变同理计算即可得到。   下面贴出代码字段。...
Unity3d C# 实现UGUI面板跟随标注3D模型功能源码
10-20
本教程将详细讲解如何使用C#脚本实现UGUI面板跟随3D模型的功能，使得UI面板能够动态地吸附在选定的三维对象上，为用户提供实时的信息展示或交互。 首先，我们需要理解UGUI的基本概念。UGUI系统由一系列的UI组件组成...
UGUI小功能实现一：图片跟随文本自适应
菜菜ANY的博客
03-17 1492
有时候我们在做的项目中可能会遇到以下这种显示效果，当文本内容改变时，图片始终在文本右边等距的位置 之前还觉得好像很麻烦，今天看到FairyGUI,突然觉得用UGUI实现也很简单 首先，将图片设置为文本的子物体 然后设置图片的锚点 随后要设置文本框随字数变化，在文本上添加Content Size Fitter组件即可 ...
unity UGUI文本和背景自适应缩放&鼠标移入文字自动循环滚动
ThreePointsHeat的博客
12-08 927
unity UGUI文本和背景自适应缩放&鼠标移入文字自动循环滚动。
Unity聊天框功能，背景图片随文字大小而改变
cuijiahao的专栏
04-08 4248
一、创建UI物体 新建一个Canvas，然后创建一个 Image，再在 Image 里面添加一个子物体 Text 如图 场景中效果 此时并没有设置任何参数。 二、添加组件 给 Image 添加两个组件 horizontal layout group，content size fitter 注意图中的设置参数，如下图：. 这时候，场景中的布局自动就变成了这样 三、运行 此时还没有写任何的代码，效果已经实现了，运行后，在编辑器中我们改变 Text 的文本的内容，可以看到，场景
UnityUGUIText根据内容自适应（滑动框、图标跟随）
weixin_44250118的博客
07-22 2228
一.icon图标跟随在文字前面随文本长短而移动位置 1.Text组件GameObject添加Content Size Fitter组件控制文本框大小随内容而变化 2.把图标放到子物体位置，Rect Transform 中的Pivot设置为1,0.5 调整好位置即可 3.上、下或者右边同理。文本扩展方向以及位置通过改变 和Rect Transform 中的Pivot设置 二.Scroll View滑动框大小随文字改变 比如竖直排列 1.文本框上添加Content Size Fitter..
UGUI小技巧之Text随文本内容自动变化大小
热门推荐
GGman的博客
07-02 1万+
转自：https://www.cnblogs.com/xiaoyulong/p/9848023.html 看了网上很多帖子，都是说在Text上面加上Content Size Fitter组件，并将对应的轴向改成Preferred size就可以实现Text大小随着文本内容自适应，如下图： 这样的确能够实现自适应，但是你会发现Text是上下或者左右同时扩容，这种效果并不一...
Unity3d UGUI以鼠标位置点为中心缩放图片项目源码
06-09
在本项目中，我们关注的是如何使用UGUI实现以鼠标位置为中心的图片缩放功能。 首先，我们要理解UGUI的基本构成。UGUI主要由Canvas、RectTransform、Image等组件组成。Canvas是UI的容器，可以设置为屏幕空间或世界...
unity UGUI图片任意截取和裁剪
04-07
使用ugui对图片进行任意角度，大小，缩放，以及任意位置进行截取和裁剪，还可以设置圆角或者矩形方式操作
Unity UGUI实现简单拖拽图片功能
08-19
Unity UGUI实现简单拖拽图片功能 在 Unity 中实现拖拽图片功能是非常常见的需求，特别是在制作游戏、交互式应用程序时。在本文中，我们将详细介绍如何使用 Unity UGUI 实现简单拖拽图片功能。 UGUI 坐标系统 -----...
UGUI实现图片拖拽功能
08-26
在 `OnDrag` 方法中，我们更新图片的位置，使其跟随鼠标的移动。 最后，我们可以使用 `MyDrag` 脚本来实现图片拖拽功能。 通过 UGUI 实现图片拖拽功能的过程，可以了解 UGUI 中的坐标系、事件机制和坐标转换等概念...
unity text跟随内容变化 并使图片随着text的变化改变位置
o_ojjj的博客
10-14 2238
首先给text 添加conentSize Fitter组件 然后设置rectTransform的Pivot 设置Pivot 的X，如果是横着排版 Y一直为0.5即可 X:0 text内容向右排版 X:0.5 text内容向两边排版 X:1 text内容向左排版 这是横着排版的X设置，如果是竖着排版 则修改Y的值即可，X为0.5 当text变化是 图片始终处于文本框右边 1、把图片处于text的子物体 2、按住ALT修改图片的锚点 如果是在文本框右边，设置锚点为右边， 没法录视频，放个图片
Unity 做一个提示框，背景图片随文字改变大小
熊思雨的博客
03-24 7074
实现这个功能并不是特别难，我这里主要用了两个布局组件：horizontal layout group，content size fitter，下面是这两个组件的介绍。Unity 的 Horizontal Layout Group（水平布局组）是 Unity 引擎中的一个 UI 布局组件。它用于在水平方向上自动排列其子对象，使它们按照一定的规则进行对齐和布局。Horizontal Layout Group 可以通过 Unity 的编辑器界面进行配置，也可以通过脚本进行动态设置。
Unity基础：图片根据文字内容自适应大小（ContentSizeFitter的使用小技巧）
Fay_Fey'S Blog
03-13 3441
1、方案一PS：原理，父物体通过自适应文字内容来改变大小，Image图片根据父物体的大小改变自身大小，然后根据UI层级关系在最新层显示Text的文本内容，以达到背景图片根据文字内容自适应，并且文字显示在背景图片的上面2、方案二父物体为背景图，子物体为文本内容，最终效果：当文本内容增加时，改变Vertical Fit...
UGUI的image跟随text长度自适应
qq_41794226的博客
03-21 3387
效果如下，图片会根据text的长度来改变 图片上的组件如下。 1、添加HorizontalLayoutGroup，并设置Padding，就是左右两边的空白，因为我们是想让Button的长度（水平方向）做变化，所以我们添加Horizontal组件。 2、添加 ContentSizeFitter，这个组件的Horizontal Fit（水平适配）设置了PreferredSize(优先尺寸)，当Text...
【Unity3d每日一记】背景图随文本内容拉伸
PEACE
09-20 3489
unity ugui图片自适应文字内容大小
没钱装电脑的程序猿
11-07 5203
本文转摘自博客园： 倾城之叹 1、（UI提示框与文字） Unity Text组件需要与Image组件自适应新建如图的UI物体 如图为Image的RectTransform中设置Pivot（中心点），如果需要向上向左适应，则将中心点设置在Image的右下方，并添加Content Size Fitter 组件（放在父物体上，可以根据子物体的大小来控制父物体的大小），添加Horizonta
Unity 3D - UGUI 自适应文本框
Yu
04-23 7953
Unity 3D - UGUI 自适应文本框 :效果图 :说明 :同一个文本框显示不同内容 , 文本框自适应缩放 .实现方式 : 第一步 : 创建一个文本( Text ) , 文本下再创建另一个文本( Text ) 和 一个图片( Image ) .第二步 : 给父节点文本( Text )添加 Content Size Fitter 组件 , 设置Horizontal Fit 和 Vertical
untiy ugui 改变image位置的代码
最新发布
03-28
以下是使用Unity UGUI修改Image位置的示例代码： ```csharp using UnityEngine; using UnityEngine.UI; public class ChangeImagePosition : MonoBehaviour { public Image image; public Vector2 newPosition; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值