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所发进行计算到最终的点举一个例子

修改后

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

相关推荐
码匠许师傅7 小时前
【设计模式精讲】25.状态模式(State)
c++·ui·设计模式·状态模式·uml
插件开发1 天前
Illustrator 插件开发:链接文件存在检查的原理与实战
ui·illustrator
xy34531 天前
axure9.0 如何打造一个计时器(简单版)
前端·ui·html·axure·原型·产品设计
图扑软件1 天前
下篇・换墨|主题/多语言/移动端,一套组件全覆盖
前端·javascript·ui·性能优化·数据可视化
object not found3 天前
从 Page Design 到 System Design:我对 UI/UX 的一次认知变化
ui·ux
xy34533 天前
Axure9.0中继器遮罩实现方法
前端·ui·html·axure·原型·产品设计
晴天163 天前
Ant Design UI 库核心原理与应用
ui
玫瑰互动GEO3 天前
腾讯AnswerBit(GEO优化监测平台)技术拆解:UI自动化如何采集真实AI回答
大数据·人工智能·ui·ai·自动化·geo优化
摸鱼仙人~3 天前
Qwen-Code ACP与AG-UI协议深度解析:区别、场景与实战报文对比
ui
图扑软件4 天前
中篇・运笔|统一 DataModel 底座,HT UI 组件万物同源
javascript·低代码·ui·性能优化·数据可视化