7-添加鼠标事件

芋圆社区 > 编程 > 【项目】桌宠之旅 > 7-添加鼠标事件

765

2023-07-03

2023-07-18

Hey、小怪兽

• 下面需要为桌宠添加三个事件为后续的开发做准备：
- 鼠标移动事件：mousemove
- 鼠标左键点击事件：click
- 鼠标右键点击事件：rightclick
• 前面在create_anim_func方法里生成了动画，Pixi.js有提供一些监听的事件，直接添加就行了：

// 鼠标移动事件
anim.on("mousemove", (event) => {
    const global_position = event.data.global;
    const local_position = anim.toLocal(global_position);
    console.log('鼠标移动位置:', local_position)
});

• event.data.global表示鼠标在全局坐标系下的位置，它提供了鼠标相对于整个页面或窗口的坐标信息
• anim.toLocal(global_position) 是将全局坐标转换为局部坐标的方法。它将全局坐标转换为相对于动画元素的局部坐标系中的位置
• 其实不需要转换也可以的，因为这个桌宠的贴图是占满整个窗口
• 获取局部的坐标位置后用console.log打印出来
• 这里需要在控制台看到打印的东西，先要去主进程/src/_main/main.js，之前有个开发者调试工具注释掉了，将它打开：

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

• 接着在终端pnpm start，看到页面变成这样了：
• 点击这个竖着的三个点，再点击这个窗口分离，这样就可以把控制台分离出来了：
• 接着点击Console：
• 这时发现console.log并没有被打印出来，控制台是一片空白的，是因为没有设置动画的交互模式，回到渲染进程/src/_render/render.js，加上交互模式：

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

• 因为加了热加载nodemon，所以直接保存就可以了，当鼠标在这个390x390窗口移动的时候，控制台就会打印相应的位置：
• 再加上鼠标左键点击事件和右键点击事件，当然如果后面要监听的事件很多的话，可以自己封装一个事件的代码，这里重复的代码太多了：

// 鼠标左键点击事件
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)
});

• 完美，这样我们就可以监听到了三个鼠标事件！
• /src/_renderer/renderer.js完整代码：

// 当前使用的模型
let current_module = "kkr";
// 初始配置和动作配置
let init_config = null;
// 初始动画
let anim_normal = null;
// 动画的舞台
let app = null;
// 动画的canvas
let anim_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");

    // 动画舞台配置
    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);
        console.log('鼠标移动位置:', 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/_main/main.js完整代码：

const { app, screen, 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.webContents.openDevTools();

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

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

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

上一篇：6-Pixi.js加载桌宠初始动画

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

7-添加鼠标事件

回复