零基础入门 32:修改组件的位置.宽高.旋转.缩放

已经不止一两个同学来问过我这个问题了,如何修改一个组件的位置啊,宽高啊,旋转啊,缩放啊之类的问题,鉴于好多同学都有这个疑问,我就单独把他抽出一个小分享内容列出来。

进入今天的正题


在新场景中,我们随便创建一个Image贴图,然后看下他的inspector面板中的属性

从上图可以看出来,刚刚创建的Image,大家所关心的位置啊,宽高啊,旋转啊,缩放啊,都通通在一个叫RectTransform的组件内,所以大家想知道的这些信息也都属于这个RectTransform的属性。

知道了上面的事情之后呢,告诉大家,哪些是控制的各个属性。

首先是位置

对于位置来说,在3D世界中有xyz三种坐标轴,但是对于2D UI来说,我们通常只需要修改它的x和y

也就是下图的属性就是用来控制位置的

对于宽高来说,就是我们下面的Width和Height属性

旋转值就是Rotation属性

缩放就是Scale属性

知道了什么属性修改什么值以后呢,接下来就把代码列出来,修改这个Image组件的

代码如下

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

public class ChangeImageProperties : MonoBehaviour

{

#region Public Attributes

public Image m_image;

#endregion

#region Private Attributes

#endregion

#region Unity Messages

void Start()

{

//修改位置

m_image.rectTransform.anchoredPosition = new Vector2(50.0f, 50.0f);

//修改宽高

m_image.rectTransform.sizeDelta = new Vector2(120.0f, 120.0f);

//修改旋转

m_image.rectTransform.localRotation = Quaternion.Euler(new Vector3(20.0f, 10.0f, 30.0f));

//修改缩放

m_image.rectTransform.localScale = new Vector3(1.2f, 1.2f, 1.2f);

}

#endregion

#region Public Methods

#endregion

#region Override Methods

#endregion

#region Private Methods

#endregion

#region Inner

#endregion

}

默认的Image属性图如下

运行后的修改属性图如下

好了,最后我再把关键代码粘贴一次

//修改位置

m_image.rectTransform.anchoredPosition = new Vector2(50.0f, 50.0f);

//修改宽高

m_image.rectTransform.sizeDelta = new Vector2(120.0f, 120.0f);

//修改旋转

m_image.rectTransform.localRotation = Quaternion.Euler(new Vector3(20.0f, 10.0f, 30.0f));

//修改缩放

m_image.rectTransform.localScale = new Vector3(1.2f, 1.2f, 1.2f);

以上就是今天的分享内容了,希望可以帮助更多需要的同学

大家下期分享见

原文发布于微信公众号 - 韩东吉的Unity杂货铺(DeveloperJimin)

原文发表时间:2017-10-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自动化测试实战

HTML第二课——css

2557
来自专栏LeoXu的博客

Flex笔记_MX DataGrid、列表和树

columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFun...

1162
来自专栏nummy

reStructuredtext快速入门

reStructuredText是一种reStructuredText是一种轻量级的文本标记语言,简单易读,所见即所得的文本标记语言。

802
来自专栏flutter开发者

[Flutter Widget]ExpansionPanelList

在前面的文章中我们介绍了可以展开的带标题控件ExpansionTile的用法,在文章的最后还是按照惯例给大家留下了一个问题。

1.4K3
来自专栏哎_小羊

基于jquery的imgAreaSelect.js插件+JAVA后台实现图片裁剪保存功能

前段时间,项目在做个人信息设置,其中有一项是设置用户头像信息,需要将用户选择的头像按照用户需要进行剪切,同时保存为大(120*120)、中(75*75)、小(3...

5207
来自专栏python学习路

五、XML与xpath--------------爬取美女图片 先用一个小实例开头吧(爬取贴吧每个帖子的图片)XML 和 HTML 的区别XML文档示例

除了正则表达式处理HTML文档,我们还可以用XPath,先将 HTML文件 转换成 XML文档,然后用 XPath 查找 HTML 节点或元素。 ----  先...

3754
来自专栏用户2442861的专栏

Python-OpenCV 处理图像(三):图像像素点操作

第一种办法就是将一张图片看成一个多维的list,例如对于一张图片im,想要操作第四行第四列的像素点就直接 im[3,3] 就可以获取到这个点的RGB值。

2382
来自专栏Golang语言社区

厚土Go学习笔记 | 03. 数学运算的随机数

总是要有使用随机数的情况。这就需要使用math包。 package main import( "fmt" "math/rand" ) fun...

3106
来自专栏Linux驱动

26.QT-模型视图之自定义委托

由于模型负责组织数据,而视图负责显示数据,所以当用户想修改显示的数据时,就要通过视图中的委托来完成

1512
来自专栏向治洪

java的双缓冲技术

Java的强大特性让其在游戏编程和多媒体动画处理方面也毫不逊色。在Java游戏编程和动画编程中最常见的就是对于屏幕闪烁的处理。本文从J2SE的一个再现了屏幕闪...

3918

扫码关注云+社区

领取腾讯云代金券