Unity | UGUI轴心点与锚点

一、轴心点『 Pivot 』:当前Image的轴心点所在位置,注意工具栏设置为时,Pivot的设置才有效。作用如下:

二、锚点 『Anchors』:在Image上由四个三角形组成的像风车一样的图标就是锚点。

  1. 当四个风车在一起时,面板中属性为Pos X 、Pos Y、Width、Height;
  2. 当四个风车全部分开时,面板中属性为Left /Pos X、PosY/ Top 、Right、Bottom。

                                         

三、锚点使用总结:

  1. 当四个风车在一起时,Image不会随窗口改变而放大缩小;
  2. 当四个风车两两一起,左右两边分开的时候,Image不会随着父节点的高变化而变化,而只会随着宽的大小变化;
  3. 当四个风车两两一起,上下两边分开的时候,Image不会随着父节点的宽变化而变化,而只会随着高的大小变化;
  4. 当四个风车全分开的时候,父节点物体大小的改变总是会影响到这个Image。

四、项目中使用:Icon不会随分辨率变化而放大缩小。

### Unity UGUI 自动适配屏幕分辨率不同设备的最佳实践 #### 1. 使用 Canvas Scaler 组件优化 UI 布局 为了使UI能够适应不同的屏幕尺寸,在Canvas组件上添加`Canvas Scaler`是非常重要的。该组件提供了三种缩放模式来处理不同情况下的UI布局: - **Constant Pixel Size**: 此模式保持所有UI元素的像素大小不变,适用于不需要考虑分辨率差异的情况。 - **Scale With Screen Size**: 这种方式依据参考分辨率的比例调整UI对象的实际渲染尺寸,从而保证在各种屏幕上都能获得一致的效果[^1]。 ```csharp // 设置Canvas Scaler参数 canvasScaler.matchWidthOrHeight = 0; // 完全匹配宽度或高度 canvasScaler.referenceResolution = new Vector2(1920, 1080); // 设定参考分辨率为1920x1080 ``` #### 2. 调整矩形变换属性 通过合理设置UI控件的Anchor Points(),可以确保它们相对于父级容器的位置关系不会因为窗口大小的变化而错乱。对于需要固定位置或者跟随边缘变动的对象来说尤其有用。同时利用RectTransform中的Pivot Point(轴心)、Anchored Position(定位偏移量)以及Size Delta(尺寸增量)等特性进一步微调各个部件之间的间距比例[^2]。 #### 3. 实现自定义脚本控制动态变化 当遇到更复杂的场景需求时,则可以通过编写C#脚本来实现更加灵活的功能逻辑。比如根据不同类型的终端加载特定资源文件;或是基于当前显示区域计算出最佳的文字字号、图片质量等级等参数并应用到对应的视觉元素之上[^4]。 ```csharp using UnityEngine; using UnityEngine.UI; public class ResolutionAdapter : MonoBehaviour { private void Start() { AdjustBackgroundImage(); } /// <summary> /// 根据屏幕纵横比调整背景图像填充策略 /// </summary> public void AdjustBackgroundImage(){ float aspectRatio = (float)Screen.width / Screen.height; Image backgroundImage = GetComponent<Image>(); if(aspectRatio >= 16f/9f){ // 对于宽屏采用裁剪拉伸的方式展示完整画面 backgroundImage.preserveAspect = false; backgroundImage.rectTransform.localScale = new Vector3(1, 1, 1); }else{ // 非标准比例则按照原始比例缩小至合适范围 backgroundImage.preserveAspect = true; backgroundImage.rectTransform.sizeDelta *= Mathf.Min(Screen.width/1920f , Screen.height/1080f ); } } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烫青菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值