[UGUI]游戏中的Tips贴图标边缘显示(贴边)

本文为作者原创,转载请注明出处:https://www.cnblogs.com/zhaoqingqing/p/8858819.html



Tips贴图标边缘显示#

图左:当左边宽度不足于容纳Tips时,Tips放在右侧显示,顶和图标对齐
图右:当左边宽度足够容纳Tips时,Tips放在左侧显示,顶和图标对齐

适应需求:当图标和Tips是在两个UI界面下,且两个UI的渲染模式可能不一样(Canvas的Render Mode为Screen Space或Camera),通过到Tips设置世界坐标的方式,让两者贴合在一起。

获取UI的Mesh四个顶点坐标#

我的实现思路是获取图标的四个顶点坐标,根据顶点在屏幕的坐标,计算Tip应该放在左边还是右边
获取四个顶点算法如下:

Copy
//获取UI元素的屏幕坐标,四个坐标点的顺序为:左下 左上 右上 右下 public static Vector3[] GetUIScreenPosition(Canvas canvas,RectTransform trans) { Vector3[] posArray = new Vector3[5]; if (trans == null) { Log.Warning("canvas={0}或trans={1} ,为空",canvas,trans); posArray[0] = Vector3.zero; return posArray; } //NOTE 如果某界面是以Camera方式渲染,但是传入进来的canvas为空,那么获取到的坐标不准确 if (canvas && canvas.worldCamera) { CanvasScaler scaler = canvas.GetComponent<CanvasScaler>(); //Log.Info("uiName={0},渲染模式为Camera", canvas.name); //NOTE 这种方式获取的坐标在图标中心点,计算出四个点的坐标 var centerPos = canvas.worldCamera.WorldToScreenPoint(trans.position); var scaleFact = Screen.width/scaler.referenceResolution.x; var iconWidth = trans.sizeDelta.x*scaleFact; var iconHeight = trans.sizeDelta.y*scaleFact; //找到的点在中心点 posArray[0] = new Vector3(centerPos.x - iconWidth*0.5f, centerPos.y - iconHeight*0.5f, 0); posArray[1] = new Vector3(centerPos.x - iconWidth*0.5f, centerPos.y + iconHeight*0.5f, 0); posArray[2] = new Vector3(centerPos.x + iconWidth*0.5f, centerPos.y + iconHeight*0.5f, 0); posArray[3] = new Vector3(centerPos.x + iconWidth*0.5f, centerPos.y - iconHeight*0.5f, 0); posArray[4] = centerPos; // Log.Info("图标宽度={0},{1} ,中心点={2}",iconWidth,iconHeight,centerPos); } else { //Log.Info("uiName={0},渲染模式为Overlay",canvas.name); trans.GetWorldCorners(posArray); var iconWidth = trans.sizeDelta.x*canvas.transform.localScale.x; var iconHeight = trans.sizeDelta.y*canvas.transform.localScale.y; posArray[4] = new Vector3(posArray[0].x + iconWidth*0.5f, posArray[0].y + iconHeight*0.5f, 0); } return posArray; }

上面获取到图标四个点的世界坐标之后,可以计算出Tips的世界坐标,示例:
注:我使用的Tips的pivot是居中对齐的

Copy
local tipsWidth = self.retRoot.sizeDelta.x * self.canvas.transform.localScale.x local tipsHeight = self.retRoot.sizeDelta.y * self.canvas.transform.localScale.y printf("屏幕大小=", Screen.width, ",", Screen.height, " ,Tips宽度=", tipsWidth, ",", tipsHeight) local posArray = LuaHelper.GetUIScreenPosition(canvas, rectTrans) local tmpPos = posArray[1] --for i = 0, posArray.Length-1 do -- print(posArray[i]) --end if posArray[1] then if posArray[0].x - tipsWidth > 0 then if posArray[1].y > tipsHeight then print("在屏幕左上区域,顶对齐") tmpPos = Vector3(posArray[0].x - tipsWidth * 0.5, posArray[1].y - tipsHeight * 0.5, 0) else print("在屏幕左下区域,底对齐") tmpPos = Vector3(posArray[0].x - tipsWidth * 0.5, posArray[0].y + tipsHeight * 0.5, 0) end else if posArray[1].y > tipsHeight then print("在屏幕右上区域,顶对齐") tmpPos = Vector3(posArray[2].x + tipsWidth * 0.5, posArray[1].y - tipsHeight * 0.5, 0) else print("在屏幕右下区域,底对齐") tmpPos = Vector3(posArray[2].x + tipsWidth * 0.5, posArray[0].y + tipsHeight * 0.5, 0) end end else tmpPos = posArray[0] end self.retRoot.position = tmpPos

获取UI元素的实际大小#

​ 当在编辑器下开发时(或者设备分辨率和开发分辨率不相同时),Game区域大小并不是实际设置的分辨率大小,也就是说你从属性面板看到的Width和Height和图片实际的Size是有区别的。

​ 那么如何获取某元素的实际大小呢?

Copy
//实际宽度= 宽度 * canvas的缩放值 var viewWidth = retRoot.sizeDelta.x * canvas.transform.localScale.x
作者:赵青青   一名在【网易游戏】做游戏开发的程序员,擅长Unity3D,游戏开发,.NET等领域。
本文版权归作者和博客园共有,欢迎转载,转载之后请务必在文章明显位置标出原文链接和作者,谢谢。
如果本文对您有帮助,请点击【推荐】您的赞赏将鼓励我继续创作!想跟我一起进步么?那就【关注】我吧。
posted @   赵青青  阅读(1499)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
阅读排行:
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 易语言 —— 开山篇
· Trae初体验
CONTENTS
点击右上角即可分享
微信分享提示