Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

这篇具有很好参考价值的文章主要介绍了Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

 Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

1.所有的UI物体都没有Transform组件,取而代之的是Transform组件的派生 --- Rect Transform(矩形变换)

2.Rect Transform和Transform一样都有旋转和缩放,它两之间的区别是:

Rect Transform多了:a.Pibot轴心点;b.Anchors 锚点;c.宽度,高度和略加改变后的x,y,z

3.Pos x ,Pos y , Pos z 这三个值所表示的是UI物体的轴心点相对于锚点的坐标Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

1.将上面这个Center改为Pivot就可以移动UI物体的轴心点了Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

2.UI物体的轴心点就是上图中的那个蓝色空心圆圈,这个点的坐标就是UI的具体位置,且UI物体的旋转是绕着轴心点旋转的,同时UI物体的长宽也是相对于轴心点扩大的

比如说长由100变为200,且轴心点在UI物体中心的话,则UI物体左右长度各增加50(宽同理,轴心点在其它位置同理)

3.轴心点的坐标由Rect Transform组件中的Pivot属性来表示 ---

Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

a.轴心点的坐标是通过比例来显示的

b.当一个UI物体的轴心点的坐标为(0,0)的时候,轴心点位于UI物体的左下角,为(1,1)的时候就是右上角(PS:轴心点坐标的两个值X,Y的取值范围可以大于1,也可以小于0) 

Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

1.接下来开始介绍Image组件

Image UI 物体 --- 显示图片的UI物体 --- 其有一个关键的组件 --- Image组件 ---

Image UI 物体显示的是什么图片取决于Image组件中的 Source Image属性 --- 我们给这个属性传什么图片,UI物体就显示什么图片

2.在Unity中图片的默认类型是 Texture(纹理) --- 而UI需要的图片类型是 Spirit(精灵)Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

 1.上图是一张图片的Inspector面板,在这个面板中我们可以通过修改 Testure Type来修改图片的类型

Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

目前我们要将其改为:Spirit精灵类型(PS:选完之后记得点右下角的Apply应用)Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

 1.创建一个UI物体后,这个UI物体会带着上图这四个小三角 --- 这四个小三角就是UI物体的锚点(Anchors)

2.一个UI物体的四个角与其锚点对应的四个角之间的相对位置不发生改变(除非我们手动调) --- 也就是说如果我们改变锚点的位置,为了保证相对位置不发生改变,UI图像的位置也要跟着变

3.锚点与屏幕的相对位置不发生改变(除非我们调)--- 例如锚点本来在屏幕的右上角,当屏幕扩大后,锚点要保持相对位置不变,会移动到变化后的屏幕的右上角Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

1.常用的锚点位置就是上图圈起来的九个地方

2.锚点的四个小三角形是能够分开的哦,每个小三角形都对应着UI物体四边中的一个角(PS:每个角与屏幕的相对位置要保持不变)

3.如果不将锚点的小三角形分开的话 --- 我们能够实现的是位置自适应;如果将锚点分开的话,我们能够实现的就是大小自适应

Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

1.锚点,轴心点和UI物体的位置的设置方法有两种:

一种是我们在场景中手动调

另一种就是直接设置Unity给我们提供的现成的模板即可 --- 模板的位置在UI物体的Inspector面板处的Rect Transform组件的左上角那个框框

选中这个框后就会出现下面那些模板供我们进行选择 --- 如果要设置锚点,直接点就好,如果想在设置锚点的同时设置轴心点的话需要按住shift再进行点击 ;如果是想同时设置UI物体的位置的话,需要按住alt再进行点击选择

Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

1.除了有橙色部分的,选择锚点位置的预设项外,还有拉伸(Stretch)锚点的预设项Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

1.UI物体的Pos X,Pos Y,Pos Z对应的就是UI物体的轴心点相对于锚点的距离(锚点未分离的情况)

2.如果是锚点发生分离的情况 --- 则还需要分为三种状态讨论:

a.锚点左右分离 --- 此时Pos X 失去意义,被Left和Right取代 --- Left的数值是UI物体的左边框与左半锚点的距离,Right就是UI物体右边框与右半锚点的距离

Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用

 b.锚点上下分离 --- 与左右分离同理 --- Pos Y失去意义,被Top上和bottom下取代,分别对应的是上边框与上半锚点的距离,下边框与下半锚点的距离

c.锚点上下左右分离 --- 这种情况就是上面两种情况的集合 --- Pos X , Pos Y被Right Left Top Bottom替代了

(PS:上面所说的距离实质上就是UI物体边框/轴心点(视情况而定,看有没有分开)与锚点之间的像素差)文章来源地址https://www.toymoban.com/news/detail-422090.html

到了这里,关于Unity --- UGUI --- Rect Transform(矩形变换) --- 锚点及其相关应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小波变换(wavelet transform)

     小波变换跟时间有关,横坐标是时间,纵坐标是频率。 真实世界的数据或者信号经常表现出缓慢变化的趋势或因瞬态而出现的震荡,另一方面,图像具有被边缘中断或者对比度突然变化的平滑区域,傅里叶变换不能有效代表突然的变化,这是因为傅里叶变换将数据表示为未

    2024年02月07日
    浏览(29)
  • css-transform2D变换

    CSS transform 属性允许你旋转,缩放,倾斜或平移给定元素。 常用的 transform 属性有下面几个 属性 说明 translate(0, 0) 位移 rotate(0deg) 旋转 scale(1) 缩放 skew(0deg) 斜切 transform的说明文档 :https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform 下面分别说一下这几个方法 translate() 位移 translat

    2023年04月08日
    浏览(23)
  • 入门指南:深入解析OpenCV的copyTo函数及其与rect的应用场景

    OpenCV是一个功能强大的开源计算机视觉库,广泛应用于图像处理和计算机视觉任务。在OpenCV中,copyTo函数是一个重要的图像处理函数,它允许我们在不同的图像之间复制像素数据,同时结合rect(矩形)的使用,可以实现更多有趣的功能。本文将深入讲解copyTo函数的用法,并提

    2024年02月15日
    浏览(32)
  • 【C++】STL 算法 - transform 变换算法 ① ( transform 函数原型 | 将 一个 或 两个 输入容器 中的元素 变换后 存储到 输出容器 中 )

    std::transform 是 STL 标准模板库 中的一个算法 , 该算法的作用是 用于对 容器 或 指定迭代器范围 的 每个元素 进行 指定的 \\\" 转换操作 \\\" , 并将 \\\" 转换结果 \\\" 存储到另一个容器中 ; std::transform 算法 接受 一个 或 两个输入范围 , 以及一个输出范围 , 并 根据提供的 一元函数对象 或

    2024年01月16日
    浏览(46)
  • Python 傅里叶变换 Fourier Transform

    flyfish 一图胜千言 Fast Fourier Transform (FFT) 快速傅里叶变换 快速傅里叶逆变换 p e r i o d = 1 f r e q u e n c y period = frac{1}{frequency} p er i o d = f re q u e n cy 1 ​ 因为1、3、7相对2000,在坐标轴上太小把上述代码freq_feature 改成100,300,700更容易看出特点 继续绘制freq_feature =1、3、7的傅里叶变

    2024年02月20日
    浏览(29)
  • 矩阵的乘法运算与css的3d变换(transform)

    引言:你有没好奇过,在一个使用了transform变换的元素上使用window.getComputedStyle(htmlElement)[\\\'transform\\\'] 查询出来的值代表什么? 为什么硬件加速要使用transform,以及为什么硬件加速会快? 小科普:关于矩阵的乘法 由此,可以看到两个矩阵相乘就是拿第一个的每一行,乘以第二个

    2024年02月08日
    浏览(34)
  • 距离场和距离变换:distance_transform

            你知道图像处理的骨架这个概念吗?如果知道,你能解释清楚什么算法生成骨架吗?从一堆横竖叠加的扑克牌中,你能整理出几张牌,并保存牌的花色信息吗?如果您对上述提问存在疑虑,那么就好好看看本文吧。         距离 变换 ,也称为 距离图 或 距离

    2024年01月16日
    浏览(32)
  • Unity Scroll Rect滚动到底部

    在使用ScrollView的时候,有这么一个需求,就是ScrollView的内容中填充的是一个动态的列表,在新添加元素的时候,需要将滚动列表自动定位到最后一个。 1、修改Scrollbar Vertical的value 值为0时,位于底部,值为1时,位于顶部。 2、修改ScrollRect的verticalNormalizedPosition 值为0时,位于

    2023年04月08日
    浏览(33)
  • 【Kotlin】函数式编程 ① ( 函数式编程简介 | 高阶函数 | 函数类别 | Transform 变换函数 | 过滤函数 | 合并函数 | map 变换函数 | flatMap 变换函数 )

    编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式

    2024年01月18日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包