【AI渲染引擎】Javascript实现Popup-悬浮-弹出框

一个很简单淡出框，带关闭按钮

方便二次开发

this.uvTemp.addEventListener('click', () => { this.createUvPopup(); this.uvPopup.style.display = 'block'; });

关键的显示在于

.display === 'block';

Css,Style 可能需要

position:relative

完整代码

createUvPopup() { console.log("createUvPopup",this.uvPopup); if (this.uvPopup) return; this.uvPopup = document.createElement('div'); this.uvPopup.id = 'tex-uv-popup'; this.uvPopup.style.cssText = ` position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; width: min(760px, 90vw); background: rgba(20, 24, 30, 0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; box-shadow: 0 25px 60px rgba(0,0,0,0.45); color: #fff; display: none; padding: 12px; box-sizing: border-box; `; this.uvPopup.innerHTML = ` <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px;"> <div>UV 贴图叠加预览</div> <button type="button" style="padding:4px 10px; border:none; border-radius:6px; cursor:pointer;">关闭</button> </div> <div style="display:flex; gap:12px; flex-wrap:wrap; justify-content:center;"> <div style="display:flex; flex-direction:column; align-items:center; gap:6px;"> <div style="font-size:12px; color:#dfe7ff;">原贴图 + UV 点</div> <canvas id="tex-uv-orig-canvas" width="300" height="300" style="max-width:100%; border-radius:8px; background:#fff; border:1px solid rgba(255,255,255,.18);"></canvas> </div> <div style="display:flex; flex-direction:column; align-items:center; gap:6px;"> <div style="font-size:12px; color:#dfe7ff;">UV 贴图</div> <canvas id="tex-uv-map-canvas" width="300" height="300" style="max-width:100%; border-radius:8px; background:#fff; border:1px solid rgba(255,255,255,.18);"></canvas> </div> </div> `; const closeBtn = this.uvPopup.querySelector('button'); closeBtn.addEventListener('click', () => { this.uvPopup.style.display = 'none'; }); document.body.appendChild(this.uvPopup); }

想当年啊（两年前），古法编程的优缺点

优点

• 写备注
• 改新人代码，改正，乱掉，再改正
• 分架构，分模块，分杜段落
• 方法重构

缺点

• 前后顺序调乱

因为 z-index 控制元素的堆叠顺序。 你的结构中： tex-uv-popup: z-index: 9999 magnifier: z-index: 2 并且放大镜被移动到了： document.body.appendChild(this.magnifier); 所以放大镜和 UV 弹窗处于同一层级上下文中。虽然放大镜已经执行了： this.magnifier.style.display = 'block'; 但它实际被 tex-uv-popup 覆盖了，因此看起来像是 Canvas 没有显示。 设置： this.magnifier.style.zIndex = '10000'; 后，放大镜的层级高于 UV 弹窗的 9999，所以可以显示在弹窗上方 另外，原始放大镜的 z-index: 2 只适用于它作为 tex-preview-stage 子元素时；移动到 document.body 后，需要重新设置更高的层级。

另一个很简单的放大镜效果

完整代码

？？？

Html Img 的适配问题

你以为你有2~3年，经验你很懂是么

结果出了个naturalWidth属性

<img src="photo.jpg" width="300" style="width: 200px;">

如果photo.jpg原始尺寸是 1200×800，那么：

• img.naturalWidth→1200
• img.width→300（HTML 属性）
• img.clientWidth→200（CSS 渲染后的实际显示宽度）

naturalWidth是<img>元素的一个属性，它表示的是图片文件本身的原始像素宽度，也就是图片在没有任何 CSS 缩放、HTML 属性限制的情况下，"天生"的宽度。

决定因素

naturalWidth完全由图片文件自身的数据决定，具体来说：

• 图片文件的像素尺寸：图片在被创建/导出时设定的宽高（比如一张 1920×1080 的 PNG，naturalWidth就是 1920）。
• 图片格式中嵌入的分辨率信息：如 JPEG 文件头中记录的像素宽高。

不受什么影响

• 不受<img>标签的width/height属性影响：这些只影响显示尺寸。
• 不受 CSS 的width/height影响：CSS 缩放不改变naturalWidth。
• 不受srcset/sizes影响：虽然浏览器会根据这些选择不同分辨

无厘头参考：

Panda BT Pro

Panda BT Pro | AI | Unity Asset Store