Nodejs中node-webkit frame（false）边框去掉后

Nodejs中node-webkit frame（false）边框去掉后

边框去掉后，怎么底部出现大概1PX的黑色底框，且移动整个窗口的时候，那黑色框依旧停留在原来的地方，像显卡不行出现的卡卡的样子，过段时间，那黑色框才消失，继续移动也是一样。。。

7 回复

当使用 node-webkit（现在称为 NW.js）开发应用时，设置 frame: false 可以去掉应用窗口的默认边框。然而，在某些情况下，这可能会导致一些视觉上的问题，比如你提到的底部出现大约1px的黑色边框。

解决方法

为了解决这个问题，你可以尝试以下几种方法：

  1. 使用CSS覆盖：通过CSS样式来覆盖或隐藏掉这些不想要的黑色边框。
  2. 调整窗口大小和位置：有时候，重新设置窗口的大小和位置可以解决这种显示问题。
  3. 使用透明背景：确保你的应用背景是透明的，并且所有UI元素都正确地定位。

示例代码

1. 使用CSS覆盖黑色边框

<!DOCTYPE html>
<html>
<head>
    <title>NW.js Frameless Window Example</title>
    <style>
        body {
            background-color: white; /* 确保背景颜色与你的应用一致 */
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .content {
            width: 100%;
            height: 100%;
            background-color: white; /* 确保内容区域的背景颜色与body一致 */
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- Your application content goes here -->
    </div>
</body>
</html>

2. 调整窗口大小和位置

var gui = require('nw.gui');
var win = gui.Window.get();

// 设置初始窗口大小和位置
win.width = 800;
win.height = 600;
win.x = 100;
win.y = 100;

// 重新设置窗口大小和位置
setTimeout(function() {
    win.width = 800;
    win.height = 600;
}, 1000);

3. 使用透明背景

body {
    background-color: transparent; /* 透明背景 */
}

总结

通过上述方法，你应该能够解决在 node-webkit 应用中去除边框后出现的黑色边框问题。如果这些方法仍然无法解决问题，可能需要进一步检查是否有其他CSS或JavaScript代码影响了渲染效果。


估计是你机子性能问题。

请问一下，去掉边框之后如何进行窗口移动？

用css

问得好，这是个麻烦问题； 窗口如何移动恐怕得靠自己来写，目前node-webkiti似乎没提供这样的api; node-webkit项目虽好，但是只有2个人开发，进度实在太慢，没有多少c++精通的人感兴趣；

…不能再简单

在Node-WebKit（现称为NW.js）中，当你设置frame: false来去掉浏览器窗口的默认边框时，可能会遇到一些渲染问题，比如你提到的黑色边框残留问题。这通常是由于渲染层与底层操作系统之间的交互出现问题导致的。

解决方法

1. 使用CSS调整

你可以尝试使用CSS来掩盖或隐藏这些残留的黑色边框。例如，可以将整个应用的背景色设置为一致的颜色，以避免用户看到这些不期望的视觉效果：

body {
    background-color: #fff; /* 例如白色 */
}

这种方法可能不是最佳解决方案，但它可以在某些情况下帮助解决问题。

2. 更新NW.js版本

确保你使用的是最新版本的NW.js。新版本通常会修复旧版本中存在的各种渲染问题。如果当前问题是由渲染引擎中的已知bug引起的，更新到最新版可能就能解决问题。

3. 调整窗口设置

有时候，通过改变窗口创建时的其他参数也可以帮助解决这类问题。例如，尝试使用transparent: true属性，让窗口背景透明，并结合CSS背景颜色来掩盖这些问题：

var gui = require('nw.gui');
var win = gui.Window.get();
win.options = {
    frame: false,
    transparent: true,
    alwaysOnTop: false
};

4. 检查硬件加速

如果上述方法都无效，可以尝试检查是否启用了硬件加速。确保你的系统支持并且正确配置了硬件加速。有时候禁用硬件加速可以解决一些渲染问题，但这通常会影响性能。

win.options = {
    frame: false,
    transparent: true,
    alwaysOnTop: false,
    frame: false,
    show_in_taskbar: true,
    nodejs: true,
    transparent: true,
    "context-menu": true,
    "disable-domain-reliability": true,
    "disable-pinch-zoom": true,
    "disable-gpu-rasterization": true // 禁用GPU加速
};

请注意，禁用GPU加速可能会影响应用程序的性能和渲染质量。

总结

这些问题通常是由于渲染引擎与操作系统之间交互产生的兼容性问题。上述建议提供了几种可能的解决方案，包括CSS调整、更新软件版本、修改窗口选项以及检查硬件加速设置。希望这些方法能够帮助你解决遇到的问题。

回到顶部