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

7-添加鼠标事件

746
0
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-获取区域颜色和判断桌宠本体

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

0-桌宠开发前言

1-搭建环境和创建简单的应用程序

2-修改项目结构

3-创建一个透明的窗口

4-nodemon实现热加载

5-获取桌宠每一帧图片

6-Pixi.js加载桌宠初始动画

7-添加鼠标事件

8-获取区域颜色和判断桌宠本体

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

10-实现桌宠拖拽

11-实现桌宠随机动作

12-实现桌宠播放语音

13-实现桌宠词板功能

14-设置系统托盘

15-实现桌宠模组切换

16-桌宠数据和状态拓展

17-生成ICO图标和准备打包

18-完成开发并打包桌宠应用

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点