Unity实现panel最大化按钮的全屏拉伸及尺寸还原功能

核心逻辑不要做反向尺寸推算，提前缓存初始状态是容错率最高的实现方式，具体步骤如下：

• 缓存panel初始状态
  在panel首次渲染挂载完成的节点，把所有和尺寸、位置相关的样式参数全量存下来，不要只存宽高：

// 仅在panel初始化完成后执行1次
const panelBaseState = {
  width: window.getComputedStyle(panelEl).width,
  height: window.getComputedStyle(panelEl).height,
  top: window.getComputedStyle(panelEl).top,
  left: window.getComputedStyle(panelEl).left,
  aspectRatio: window.getComputedStyle(panelEl).aspectRatio,
  transform: window.getComputedStyle(panelEl).transform,
  position: window.getComputedStyle(panelEl).position,
  zIndex: window.getComputedStyle(panelEl).zIndex
}

注意这里取的是计算后样式，不要直接取内联样式值，避免初始样式写在class里的场景下拿不到正确值。

• 给切换按钮加状态锁
  给控制按钮绑定一个布尔状态isMaximized，初始值为false，点击按钮时按状态分支执行逻辑：
  • 当isMaximized === false：执行你已经调试通的aspect ratio拉伸逻辑，把panel撑满canvas全屏，执行完把isMaximized设为true
  • 当isMaximized === true：把之前缓存的panelBaseState里的所有样式属性逐一赋值回panel元素，如果你最大化时额外给panel加了全屏专属class（比如提z-index、改fixed定位的class），这一步同步移除，执行完把isMaximized设为false
• 特殊场景适配
  如果你用的是封装好的第三方UI组件的aspect ratio能力，没有暴露修改样式的入口，可以换个DOM结构层面的实现思路：最大化时直接把panel元素移动到提前准备好的、和canvas尺寸100%匹配的全屏容器里；还原时把panel元素移回它原本的父容器即可，连样式缓存都不需要，不会破坏组件内部的aspect ratio逻辑。

避坑提醒：不要尝试通过canvas尺寸、当前aspect ratio值反向推算panel原始尺寸，只要页面存在布局偏移、边距动态调整、嵌套容器padding变化，反向计算的结果一定会和原始尺寸有像素级偏差，缓存状态的方案可以完全规避这类问题。

内容的提问来源于stack exchange，提问作者SFNargs