Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlay issues with preview display and HTML CANVAS #1376

Open
Fucntion opened this issue Nov 9, 2023 · 3 comments
Open

Overlay issues with preview display and HTML CANVAS #1376

Fucntion opened this issue Nov 9, 2023 · 3 comments

Comments

@Fucntion
Copy link

Fucntion commented Nov 9, 2023

请问可以将display输出到指定的canvas元素吗?

感觉这个问题没有得到很好的回答。
#1229

@naive0817
Copy link

我有着同样的需求。
目前我的解决方案是: 单独创建一个B窗口输出obs画面,在A窗口需要显示的地方设置背景透明穿透。


translation:

I have the same requirement. My current solution is to create a separate B window to output the OBS screen, and set the background of the A window to be transparent where it needs to be displayed.

@Fucntion
Copy link
Author

@naive0817 然后强制B窗口固定显示在A窗口下方吗?
不然得话A窗口的dialog或者其他弹出层内容,是无法显示在B窗口之上的。

@naive0817
Copy link

@naive0817 然后强制B窗口固定显示在A窗口下方吗? 不然得话A窗口的dialog或者其他弹出层内容,是无法显示在B窗口之上的。

是的, 我利用了子窗口一定会位于父窗口上方的特性. 以下是代码片段:

const mainWindow = new BrowserWindow({
    autoHideMenuBar: true,
    titleBarOverlay: {
      height: 30,
    },
    ...
  });

const childWindow = new BrowserWindow({
    parent: mainWindow,
    transparent: true,
    frame: false,
    ...
  });


combineMainAndChildWindow(mainWindow, childWindow)
app.obs.bind(mainWindow)

// 将主窗口和子窗口绑定在一起, 实现同步移动和缩放
function combineMainAndChildWindow(mainWindow: BrowserWindow, childWindow: BrowserWindow) {
  function resize() {
    const [width, height] = mainWindow.getContentSize();
    childWindow.setContentSize(width, height);
  }

  function move() {
    const yOffset = 30;
    const [x, y] = mainWindow.getPosition();
    childWindow.setPosition(x + 8, y + yOffset);
  }

  mainWindow.on('resize', () => {
    if (mainWindow.isMinimized()) {
      return;
    }
    resize();
    // move();
  });

  // 监听主窗口的move事件
  mainWindow.on('move', () => {
    if (mainWindow.isMinimized()) {
      return;
    }
    resize();
    move();
  });


  mainWindow.on('moved', () => {
    if (mainWindow.isMinimized()) {
      return;
    }
    move();
  });

  mainWindow.on('maximize', () => {
    resize();
    move();
  });

  mainWindow.on('unmaximize', () => {
    resize();
    move();
  });

  mainWindow.on('minimize', () => {
    childWindow.minimize();
  });

  mainWindow.on('restore', () => {
    childWindow.restore();
    resize();
    move();
  });

  childWindow.on('restore', () => {
    mainWindow.restore();
    resize();
    move();
  });

  // 失去焦点时重定位(解决多屏幕下, 点击B屏幕时, A屏幕的窗口消失问题)
  childWindow.on('blur', () => {
    if (!BrowserWindow.getFocusedWindow()) {
      move();
      resize();
    }
  });

  return [resize, move];
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants