【UI绝对位置应用】物品详情页

物品详情页

物品详情页是背包系统中的一个常用功能，用来展示格子上物品的具体信息。
制作该功能的主要思路就是获取格子UI的绝对位置，然后再给详情页UI的绝对位置赋值即可。
然而目前版本UI的绝对位置只能获取，不能赋值，所以下面给大家一个替代方案。

替代方案思路
下面有几个前提要素需要了解：
1. 我们可以通过 Geometry.getAbsolutePosition() 来获取UI控件的绝对位置。
（注意事项：只有当UI成功渲染在屏幕上时，该API才会生效）
2. 目前UI的position属性，代表的是相对位置。
3. UI的绝对大小会受DPI缩放的影响，这会导致绝对位置在不同的屏幕缩放条件下，结果不同。

根据上述3个要点，所以我们可以通过获取根画布的绝对位置，再获取按钮的绝对位置，二者求一个差值，就获取到了按钮相对根画布的相对位置。

核心代码如下：

const btnAbs = this.mBtn.cachedGeometry.getAbsolutePosition()

// 获取背包根画布的绝对位置

const bagAbs = this.bagUI.uiWidgetBase.cachedGeometry.getAbsolutePosition()

// 计算差值

let targetAbsPos = btnAbs.subtract(bagAbs)

// 获取DPI scale

const dpiScale = mw.getViewportScale()

// 消除DPI的影响

targetAbsPos.x /= dpiScale

targetAbsPos.y /= dpiScale

// 附加自定义的偏移值

targetAbsPos.add(new Vector2(130, 130))

// 设置详情页位置

desUI.uiWidgetBase.position = targetAbsPos

演示Demo：
详情页.zip (114.67 KB, 下载次数: 51)

2024-3-17 20:52 上传

点击文件名下载附件

cachedGeometry
tickSpaceGeometry
paintSpaceGeometry
有三种几何信息,都有什么区别呢,API手册的描述太抽象了看不懂
在这里为什么要用 cachedGeometry

糖门-板砖 发表于 2024-3-18 14:33
cachedGeometry
tickSpaceGeometry
paintSpaceGeometry

这里的描述正在改了，后面版本就会更新上去。
这里用cached主要是为了能够获取最终结果，因为另外两个Geometry在UI正在创建或者更新位置的时候，获取到的值不是最终结果。