UI同步屏幕自适应

可以看到我们是一个框选的功能 我的想法是 在 UI上面做一个Img 去进行一个框选 这个时候我是这么实现的

cs 复制代码
 public Rect GetSelectionAreaRect()
 {
     Vector2 selectionEndMousePosition = Input.mousePosition;
     var lowerLeftCorner = new Vector2
     (
         Mathf.Min(selectionStartMousePosition.x, selectionEndMousePosition.x),
         Mathf.Min(selectionStartMousePosition.y, selectionEndMousePosition.y)
         );
     var upperRightCorner = new Vector2
     (
         Mathf.Max(selectionStartMousePosition.x, selectionEndMousePosition.x),
         Mathf.Max(selectionStartMousePosition.y, selectionEndMousePosition.y)
     );
     return new Rect(
         lowerLeftCorner.x,
         lowerLeftCorner.y,
         upperRightCorner.x - lowerLeftCorner.x,
         upperRightCorner.y - lowerLeftCorner.y

         );

 }

这部分代码是 计算当前的 鼠标的起始点 和 鼠标的终点 之后构建一个矩阵

矩阵的 是按照左下角进行算的 那么当前的UI锚点也是 左下

要不然你的位置是不对的

之后你要在

cs 复制代码
   var localScale = canvas.transform.localScale.x;//自适应UI
   Rect selectionAreaRect = UnitSelectionManager.Instance.GetSelectionAreaRect();
   selectionUI.anchoredPosition = new Vector2(selectionAreaRect.x, selectionAreaRect.y)/ localScale;
   selectionUI.sizeDelta = new Vector2(selectionAreaRect.width, selectionAreaRect.height)/ localScale  ;

计算一个canvas 的缩放 这个是因为你的是UI的 所发 如果是 1920 1080的缩放来计算的化 到 其他的大小你的canvas 就会进行变更我们要根据当前的 canvas所发进行计算到最终的点举一个例子

修改后

你应该就发现问题 所以你要根据当前的 矩阵 是根据屏幕大小来计算的 所以要 / 屏幕的缩放了

相关推荐
薛定猫AI3 小时前
【深度解析】Open Design 本地优先 AI 设计系统:用多模型 Agent 生成高保真 UI 原型
人工智能·ui
ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_18:(HTML 表格进阶特性与无障碍——从标题结构到屏幕阅读器适配)
前端·笔记·ui·html·音视频
苍煜5 小时前
SkyWalking最新实操入门博客:微服务可观测性搭建+原理详解+从零部署+UI使用教程
ui·微服务·skywalking
ZC跨境爬虫6 小时前
跟着 MDN 学 HTML day_16:(音频与视频处理——从画布滤镜到3D沉浸音频的进阶指南)
前端·javascript·ui·3d·html·音视频
ZC跨境爬虫20 小时前
跟着 MDN 学 HTML day_15:(媒体缓冲、拖动与时间范围控制)
前端·笔记·ui·html·edge浏览器·媒体
ZC跨境爬虫1 天前
Python Django开发者转向微信小程序:从架构理解到第一行代码的完整准备指南
开发语言·python·ui·微信小程序·django
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_13:多媒体嵌入 —— 视频与音频
前端·css·笔记·ui·html·音视频
ZC跨境爬虫2 天前
跟着 MDN 学 HTML day_12:(HTML网页图片嵌入)
前端·javascript·css·ui·html
ZC跨境爬虫2 天前
跟着 MDN 学 HTML day_11:(语义化容器全站重构+独立CSS拆分+字体合规引入)
前端·css·ui·重构·html·edge浏览器