9-设置进程通信和鼠标穿透

芋圆社区 > 编程 > 【项目】桌宠之旅 > 9-设置进程通信和鼠标穿透

739

2023-07-08

2023-07-18

Hey、小怪兽

• 上一节已经用鼠标移动能够获取到透明区域的颜色和桌宠的所在区域颜色
• 下面就需要做鼠标点击穿透了，按理来说，在透明区域点击的话，会穿透到下方的应用，如果点在桌宠上，就不会穿透
• 首先要先写一个判断是否在本体区域的方法，来到/src/utils/anim.js，传入颜色，如果是透明的话，鼠标的样式是正常的，如果是到了本体，就是可点击状态：

// 通过颜色来判断是否在本体区域
export const body_area_func = (color) => {
    const { rgba } = color;
    const canvas = document.getElementById("taro-canvas");
    if (rgba === "rgba(0,0,0,0)") {
        canvas.style.cursor = "default";
        return false;
    } else {
        canvas.style.cursor = "pointer";
        return true;
    }
};

• 再回到渲染进程/src/_renderer/renderer.js，导入方法：

// 导入方法
import { get_pixel_color_func, body_area_func } from "../utils/anim.js";

• 使用方法：

body_area_func(get_pixel_color_func(local_position.x, local_position.y, anim_img))

• 接下去要通过进程通信完成鼠标穿透了，首先，需要多传入一个参数，也就是鼠标的位置，所以渲染进程需要修改一下：

body_area_func(get_pixel_color_func(local_position.x, local_position.y, anim_img), local_position)

• 回到/src/utils/anim.js动画方法，这个window.mouseAPI.mouseMove相当于是跟预加载脚本说，我调用了你的API-mouseAPI，给你一个叫mouseMove鼠标移动的数据，里面有xy坐标轴和一个参数ignore，你要去告诉主进程

// 通过颜色来判断是否在本体区域
export const body_area_func = (color, pos) => {
    const { rgba } = color;
    const canvas = document.getElementById("taro-canvas");
    if (rgba === "rgba(0,0,0,0)") {
        canvas.style.cursor = "default";
        window.mouseAPI.mouseMove({
            x: pos.x,
            y: pos.y,
            ignore: true,
        });
        return false;
    } else {
        canvas.style.cursor = "pointer";
        window.mouseAPI.mouseMove({
            x: pos.x,
            y: pos.y,
            ignore: false,
        });
        return true;
    }
};

• 预加载脚本就是/src/_preload/preload.js：
• 来到这里写，contextBridge相当于桥梁的意思，这样可以让数据传输更安全，这个桥梁的名字叫mouseAPI，然后里面的mouseMove方法，就是获取上面渲染进程传的参数
• 接着用ipcRenderer.send，相当于发送一个叫mouse-move的东西给主进程，这个东西里面就是上面传的数据，xy坐标轴和一个ignore参数

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("mouseAPI", {
    mouseMove: (obj) => ipcRenderer.send("mouse-move", obj),
});

• 回到主进程/src/_main/main，首先需要允许鼠标穿透，这个代码的意思就是忽略鼠标的所有事件，但是还是会监听鼠标移动的位置：

// 允许鼠标穿透
mainWindow.setIgnoreMouseEvents(true, { forward: true });

• 导入ipcMain：

const { app, screen, ipcMain, BrowserWindow } = require("electron");

• 就可以监听了，监听的就是预加载脚本发来的mouse-move，obj就是数据，可以看到
- 如果在透明区域的话，那么ignore就会传true，那么鼠标点击就会穿透
- 如果在桌宠本体的话，那么就不会忽略鼠标的事件，鼠标点击就不会穿透

// 鼠标移动监听，用于判断是否需要穿透
ipcMain.on("mouse-move", (event, obj) => {
    if (obj.ignore) {
        mainWindow.setIgnoreMouseEvents(true, { forward: true });
    } else {
        mainWindow.setIgnoreMouseEvents(false);
    }
});

• 备注：这里没用到xy轴的坐标轴数据，可以自行拓展
• 在终端pnpm start，打开vscode，桌宠在vscode上方
- 如果鼠标移动到透明区域点击，那么鼠标会穿透窗口，点击到下面的vscode
- 如果鼠标移动到桌宠本体，那么鼠标的样式会改变成可点击状并且点击不会穿透，不会点击到下方的vscode
• 完美！
• 渲染进程/src/_renderer/renderer.js完整代码：

// 导入方法
import { get_pixel_color_func, body_area_func } from "../utils/anim.js";
// 当前使用的模型
let current_module = "kkr";
// 初始配置和动作配置
let init_config = null;
// 初始动画
let anim_normal = null;
// 动画的舞台
let app = null;
// 动画的canvas
let anim_canvas = null;
// 虚拟的canvas
let shadow_canvas = null;
// 获取窗口的大小
const bower_width = window.innerWidth;
const bower_height = window.innerHeight;

// 页面加载完成执行
window.addEventListener("load", async (event) => {
    // 获取配置
    const module = await import(`../modules/${current_module}/${current_module}.js`);
    init_config = module.init_config;

    // 赋值canvas
    anim_canvas = document.getElementById("taro-canvas");
    shadow_canvas = document.getElementById("shadow-canvas");
    shadow_canvas.width = bower_width;
    shadow_canvas.height = bower_height;

    // 动画舞台配置
    app = new PIXI.Application({
        view: anim_canvas,
        width: bower_width,
        height: bower_height,
        backgroundAlpha: 0,
        resolution: 1,
    });
    // 添加给div-taropet元素
    document.getElementById("taro-pet").appendChild(app.view);


    // 先把初始的动画加载完成
    anim_normal = await create_anim_func(init_config[0]);
    anim_normal.play();
    app.stage.addChild(anim_normal);
});

// 创建动画的方法
const create_anim_func = async (obj) => {
    // 存放文件前缀, 文件格式(png,jpg)
    const file_prefix = "./modules";
    const file_format = ".png";
    const { name, frames, object } = obj;
    const texture_array = [];
    // 通过帧数循环获取贴图
    for (let i = 0; i < frames; i++) {
        const num = `000${i}`.slice(-3);
        // texture_name ./modules/kkr/normal/001.png
        const texture_name = `${file_prefix}/${current_module}/${name}/${num}${file_format}`;
        const texture = await PIXI.Texture.from(texture_name);
        texture_array.push(texture);
    }
    // 生成动画，配置动画属性
    const anim = new PIXI.AnimatedSprite(texture_array);
    anim.name = name;
    anim.animationSpeed = 0.5;
    anim.loop = object.loop;

    // 设置交互模式
    anim.eventMode = "dynamic";

    // 鼠标移动事件
    anim.on("mousemove", (event) => {
        const global_position = event.data.global;
        const local_position = anim.toLocal(global_position);
        // 当前这一帧的动画贴图
        const anim_img = anim.texture.baseTexture.resource.source;
        body_area_func(get_pixel_color_func(local_position.x, local_position.y, anim_img), local_position)
    });
    // 鼠标左键点击事件
    anim.on("click", (event) => {
        const global_position = event.data.global;
        const local_position = anim.toLocal(global_position);
        console.log('鼠标左键点击:', local_position)
    });
    // 鼠标点击右键事件
    anim.on("rightclick", (event) => {
        const global_position = event.data.global;
        const local_position = anim.toLocal(global_position);
        console.log('鼠标右键点击:', local_position)
    });

    return anim;
};

• 动画方法/src/utils/anim.js完整代码：

// 通过颜色来判断是否在本体区域
export const body_area_func = (color, pos) => {
    const { rgba } = color;
    const canvas = document.getElementById("taro-canvas");
    if (rgba === "rgba(0,0,0,0)") {
        canvas.style.cursor = "default";
        window.mouseAPI.mouseMove({
            x: pos.x,
            y: pos.y,
            ignore: true,
        });
        return false;
    } else {
        canvas.style.cursor = "pointer";
        window.mouseAPI.mouseMove({
            x: pos.x,
            y: pos.y,
            ignore: false,
        });
        return true;
    }
};

// 给canvas一个原型方法，构建虚拟canvas用来获取canvas上某个点的颜色
// 传入三个参数，点击的x坐标和y坐标，img对象
export const get_pixel_color_func = (x, y, img) => {
    // 虚拟canvas
    const shadow_canvas = document.getElementById("shadow-canvas");
    // 通过canvas自带的方法获取上下文
    const context = shadow_canvas.getContext("2d");
    // 先清除画布
    context.clearRect(0, 0, shadow_canvas.width, shadow_canvas.height);
    // 绘制传入的图片，这个图片就是动画的某一帧
    context.drawImage(img, 0, 0);
    // 警告warning：Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true.
    // 获取该点像素数据
    const image_pixel_data = context.getImageData(x, y, 1, 1);
    let pixel = image_pixel_data.data;
    // 返回rgba颜色值
    let r = pixel[0];
    let g = pixel[1];
    let b = pixel[2];
    let a = pixel[3] / 255;
    a = Math.round(a * 100) / 100;
    let rHex = r.toString(16);
    r < 16 && (rHex = "0" + rHex);
    let gHex = g.toString(16);
    g < 16 && (gHex = "0" + gHex);
    let bHex = b.toString(16);
    b < 16 && (bHex = "0" + bHex);
    const rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
    const rgbColor = "rgb(" + r + "," + g + "," + b + ")";
    const hexColor = "#" + rHex + gHex + bHex;

    return {
        rgba: rgbaColor,
        rgb: rgbColor,
        hex: hexColor,
        r: r,
        g: g,
        b: b,
        a: a,
    };
};

• 预加载脚本/src/_preload/preload.js完整代码：

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("mouseAPI", {
    mouseMove: (obj) => ipcRenderer.send("mouse-move", obj),
});

• 主进程/src/_main/main.js完整代码：

const { app, screen, ipcMain, BrowserWindow } = require("electron");
const path = require("path");
// 主窗口
let mainWindow = null;

const createMainWindow = () => {
    // 获取当前桌面的宽度和高度
    const size = screen.getPrimaryDisplay().workAreaSize;
    const { width, height } = size;

    mainWindow = new BrowserWindow({
        width: 390,
        height: 390,
        // 起始位置是屏幕宽度减去窗口宽度，再减去10个像素
        x: width - 390 - 10,
        y: height - 390 - 10,
        // 隐藏菜单栏
        autoHideMenuBar: true,
        // 设置为透明窗口
        transparent: true,
        // 隐藏窗口边框
        frame: false,
        // 窗口置顶
        alwaysOnTop: true,
        // 隐藏任务栏图标
        skipTaskbar: true,
        // 禁止改变窗口大小
        resizable: false,
        // 先隐藏窗口
        show: false,
        // Preload 脚本
        webPreferences: {
            preload: path.resolve(__dirname, "../_preload/preload.js"),
        },
    });

    // 允许鼠标穿透
    mainWindow.setIgnoreMouseEvents(true, { forward: true });

    // 开启调试工具
    mainWindow.webContents.openDevTools();

    mainWindow.loadFile(path.resolve(__dirname, "../index.html"));

    mainWindow.on("ready-to-show", () => {
        mainWindow.show();
    });
};

app.whenReady().then(() => {
    createMainWindow();
});

// 鼠标移动监听，用于判断是否需要穿透
ipcMain.on("mouse-move", (event, obj) => {
    if (obj.ignore) {
        mainWindow.setIgnoreMouseEvents(true, { forward: true });
    } else {
        mainWindow.setIgnoreMouseEvents(false);
    }
});

上一篇：8-获取区域颜色和判断桌宠本体

下一篇：10-实现桌宠拖拽

9-设置进程通信和鼠标穿透

回复