Electron中如何将小窗口拖拽元素坐标映射至大窗口

核心思路是基于视频实际显示区域的比例进行坐标转换，而非直接使用窗口尺寸——窗口可能包含边框、视频黑边等非视频区域，直接用窗口尺寸会导致坐标偏差。

• 获取视频元素的实际显示尺寸
  不管是主窗口A还是预览窗口C，都要拿到视频元素的offsetWidth和offsetHeight（这是视频在页面中实际渲染的宽高，排除黑边、窗口边框等干扰）。
  示例代码：

  // 预览窗口C中获取视频尺寸
  const previewVideo = document.getElementById('preview-video');
  const previewVidWidth = previewVideo.offsetWidth;
  const previewVidHeight = previewVideo.offsetHeight;
  
  // 主窗口A中获取视频尺寸
  const mainVideo = document.getElementById('main-video');
  const mainVidWidth = mainVideo.offsetWidth;
  const mainVidHeight = mainVideo.offsetHeight;
  

• 计算预览矩形的相对比例
  将窗口C中蓝色矩形的坐标和尺寸，转换成相对于预览视频的比例值（范围0-1）：

  // 假设rect是从预览窗口获取的矩形对象，包含x, y, width, height
  const relativeX = rect.x / previewVidWidth;
  const relativeY = rect.y / previewVidHeight;
  const relativeWidth = rect.width / previewVidWidth;
  const relativeHeight = rect.height / previewVidHeight;
  

• 映射到主窗口A的视频区域
  用主窗口视频的实际尺寸乘以相对比例，得到主窗口中叠加元素的绝对坐标：

  const overlayX = relativeX * mainVidWidth;
  const overlayY = relativeY * mainVidHeight;
  const overlayWidth = relativeWidth * mainVidWidth;
  const overlayHeight = relativeHeight * mainVidHeight;
  
  // 应用到主窗口的叠加元素
  const overlay = document.getElementById('message-overlay');
  overlay.style.left = `${overlayX}px`;
  overlay.style.top = `${overlayY}px`;
  overlay.style.width = `${overlayWidth}px`;
  overlay.style.height = `${overlayHeight}px`;
  

• 实时更新处理

  • 监听主窗口A和预览窗口C的resize事件，以及视频的loadedmetadata事件（确保视频尺寸加载完成），重新计算比例并更新坐标。
  • 通过Electron的IPC通信（ipcRenderer/ipcMain）将预览窗口的相对比例发送给主窗口，避免直接传递绝对坐标。

• 关键注意点

  • 确保两个窗口中的视频都保持原始宽高比显示（比如设置object-fit: contain或cover），否则比例计算会失效。
  • 绝对不要使用窗口的clientWidth/clientHeight，因为窗口的标题栏、边框会干扰实际视频区域的尺寸计算。

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