Question

我正在使用html canvas构建绘画应用程序。我也使用菜单按钮来更改活动颜色，形状和切换填充选项。因此，我所有的逻辑都存储在canvas.js中的index.html文件中，该文件由我管理画布，但我的当前设置位于index.js中。但是我找不到在index.js和此脚本文件之间进行交流的方式。现在，每次我开始绘图时，我都会向主文件发送IPC请求并获取当前设置，但这还不够快。理想情况下，当我开始绘制内容时，我需要在此canvas.js文件中准备好当前设置。最好的方法是什么？

index.js：

const { app, BrowserWindow, Menu, ipcMain } = require('electron');

let win;

let color = '#ffff00';
let shape = 'PointShape';
let fill = true;

...
  win.loadFile('index.html');
...

ipcMain.on('getSettings', (event) => {
  event.reply('letSettings', color, shape, fill);
});

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron Paint App</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="canvas.js"></script>
  </body>
</html>

cansav.js：

window.addEventListener('load', () => {
    require('events').defaultMaxListeners = 9999;
    const { ipcRenderer } = require('electron');

...

function startPosition(e) {
        ipcRenderer.send('getSettings');
        ipcRenderer.on('letSettings', (event, color, shape, fill) => {
            curColor = color;
            curShape = shape;
            curFill = fill;
        });

...

window.global.canvas.addEventListener("mousedown", startPosition);

Answer 1

在文档中，他们说："The Menu class is only available in the main process, but you can also use it in the render process via the remote module."

我只使用ContextMenu，但是它应该起作用。在我的渲染器代码中：

const {
  BrowserWindow,
  dialog,
  Menu,
  MenuItem
} = require('electron').remote;

并定义我的菜单

const menuCloneVin = new Menu();
  menuCloneVin.append(new MenuItem({
    label: 'My Item Label',
    click() {
     // code to execute when click
    }
  }));

从html加载的主要js和js脚本之间的状态访问

1 个答案: