0

我正在尝试在 Electron 的 Touchbar 上构建一个带有自定义图像的按钮。通过“电子”进行测试时。图像显示 - 作为已发布的 macOS 应用程序，该按钮为空，并且触控栏中没有图像。该应用程序是通过 electron-builder 构建和发布的。我错过了什么？

const {app, BrowserWindow, ipcMain, dialog, TouchBar} = require('electron');
const {TouchBarButton} = TouchBar;

// Touchbar support
let touchBarResult = new TouchBarButton({
    'label': 'Let me shrink some images!',
    'backgroundColor': '#000000',
});

let touchBarIcon = new TouchBarButton({
    'backgroundColor': '#000000',
    'icon': path.join(__dirname, 'build/18x18@2x.png'),
    'iconPosition': 'center',
});

const touchBar = new TouchBar([
    touchBarResult
]);

// Add Touchbar icon
touchBar.escapeItem = touchBarIcon;

完整代码可在 Github 上的 dev 分支中找到： https ://github.com/stefansl/image-shrinker/blob/dev/main.js

4

1 回答 1

1

TouchBarButton组件接受icon选项作为对象NativeImage。如果您只显示一张图片，则其最大尺寸为 16x16。此代码完美运行：

const {nativeImage} = require('electron');
// ...
let touchBarIcon = new TouchBarButton({
  'backgroundColor': '#000000',
  'icon': nativeImage.createFromPath(path.join(__dirname, 'build/18x18@2x.png')).resize({
    width: 16,
    height: 16,
  }),
  'iconPosition': 'center',
});
于 2019-01-23T14:29:44.247 回答