pixijs H5游戏开发入门(九)桌面鼠标事件及触屏手势事件使用

本系列文章

本文编写时 pixijs 版本: v7.3.2

支持的事件列表

PIXI 中的事件区分鼠标事件和触屏事件,也有鼠标和触屏都适用的事件,参考下面表格:

  • mouse** 仅用于鼠标事件
  • touch** 仅用于触屏事件
  • pointer** 鼠标和触屏都支持的事件
事件中文含义
onclick鼠标点击事件
onglobalmousemove鼠标全局移动事件(相当于绑定在 document 上)
onglobalpointermove鼠标或触屏全局移动事件(相当于绑定在 document 上)
onglobaltouchmove触屏全局移动事件(相当于绑定在 document 上)
onmousedown鼠标按下
onmouseenter进入元素事件,不支持冒泡
onmouseleave离开元素事件,不支持冒泡
onmousemove鼠标在元素上移动事件
onmouseout进入元素事件,支持冒泡
onmouseover离开元素事件,支持冒泡
onmouseup鼠标在元素上松开事件
onmouseupoutside鼠标在元素外松开事件
onpointercancel中断事件
onpointerdown按下事件,鼠标右键也会触发
onpointerenter进入元素事件,不支持冒泡
onpointerleave离开元素事件,不支持冒泡
onpointermove元素上移动事件
onpointerout进入元素事件,支持冒泡
onpointerover离开元素事件,支持冒泡
onpointertaptap点击事件(比click事件延迟短),鼠标右键也会触发
onpointerup在元素上松开事件,鼠标右键也会触发
onpointerupoutside在元素外松开事件,鼠标右键也会触发
onrightclick鼠标右键点击事件
onrightdown鼠标右键按下事件
onrightup鼠标右键在元素上松开事件
onrightupoutside鼠标右键在元素外松开事件
ontap触屏点击事件
ontouchcancel触屏中断事件
ontouchend触屏在元素上松开事件
ontouchendoutside触屏在元素外松开事件
ontouchmove触屏元素上移动事件
ontouchstart触屏按下事件
onwheel鼠标滚轮事件

绑定事件

PIXI 与 HTML 一样,绑定事件支多种方式

  • 方式一:
1
2
3
4
5
sprite.on('globalmousemove', (event) => {  
const mouseX = event.data.global.x; // 鼠标的当前位置(全局坐标)
const mouseY = event.data.global.y;
console.log(`Mouse X: ${mouseX}, Mouse Y: ${mouseY}`);
});
  • 方式二:
1
2
3
4
5
sprite.addEventListener('globalmousemove', (event) => {  
const mouseX = event.data.global.x; // 鼠标的当前位置(全局坐标)
const mouseY = event.data.global.y;
console.log(`Mouse X: ${mouseX}, Mouse Y: ${mouseY}`);
});
  • 方式三:
1
2
3
4
5
sprite.onglobalmousemove = (event) => {  
const mouseX = event.data.global.x; // 鼠标的当前位置(全局坐标)
const mouseY = event.data.global.y;
console.log(`Mouse X: ${mouseX}, Mouse Y: ${mouseY}`);
});

一个简单事件使用示例:

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pixijs入门示例04</title>
<script src="https://pixijs.download/v7.3.2/pixi.js"></script>
<style>
* {margin:0;padding:0}
</style>
</head>
<body>
<script>
// 禁用浏览器右键菜单
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
async function init() {
// 创建一个 pixi 实例
let app = new PIXI.Application({
antialias: true, // 消除锯齿
width: 300,
height: 300
});

// 插入到 body 中
document.body.appendChild(app.view);

await PIXI.Assets.load([{alias: 'icon', src: './example-01.png'}]);
const container = new PIXI.Container();
let texture = PIXI.Assets.get("icon");
let sprite = new PIXI.Sprite(texture);
sprite.interactive = true;
sprite.cursor = 'pointer';
sprite.width = 64;
sprite.height = 64;
sprite.on('pointerdown', function() {
message.text = '按下';
}).on('pointerup', function() {
message.text = '松开';
}).on('pointerupoutside', function() {
message.text = '外松开';
}).on('pointerover', function() {
message.text = '进入';
}).on('pointerout', function() {
message.text = '离开';
}).on('rightclick', function(e) {
e.preventDefault();
e.stopPropagation();
message.text = '右键点击';
});
// 监听globalmousemove事件
const mouseInfo = new PIXI.Text("T", {
fontSize: 20,
fill: "#999"
});
app.stage.addChild(mouseInfo);
sprite.addEventListener('globalmousemove', (event) => {
const mouseX = event.data.global.x; // 鼠标的当前位置(全局坐标)
const mouseY = event.data.global.y;
mouseInfo.text = (`Mouse X: ${mouseX},\r\nMouse Y: ${mouseY}`);
});
// 创建一个文本样式对象
const style = new PIXI.TextStyle({
fontSize: 24,
fill: "#ff0000"
});
// 使用上面的文本样式新建一个文本对象
const message = new PIXI.Text("T", style);
message.anchor.set(0.5, 0.5);
message.x = sprite.width / 2;
message.y = sprite.height / 2;
container.x = app.renderer.width / 2 - sprite.width / 2;
container.y = app.renderer.height / 2 - sprite.height / 2;
container.addChild(sprite);
container.addChild(message);
app.stage.addChild(container);
}

init();

</script>
</body>
</html>

使用 pixi.js 实现元素拖拽

效果:

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pixijs入门示例04</title>
<script src="https://pixijs.download/v7.3.2/pixi.js"></script>
<style>
* {margin:0;padding:0}
</style>
</head>
<body>
<script>
async function init() {
// 创建一个 pixi 实例
let app = new PIXI.Application({
antialias: true, // 消除锯齿
width: 300,
height: 300
});

// 插入到 body 中
document.body.appendChild(app.view);

await PIXI.Assets.load([{alias: 'icon', src: './example-01.png'}]);
let texture = PIXI.Assets.get("icon");
let sprite = new PIXI.Sprite(texture);
sprite.interactive = true;
sprite.cursor = 'pointer';
sprite.width = 64;
sprite.height = 64;
sprite.x = app.renderer.width / 2;
sprite.y = app.renderer.height / 2;
sprite.anchor.set(0.5);
sprite.on('pointerdown', onDragStart, sprite);
// 监听globalmousemove事件
const mouseInfo = new PIXI.Text("按下白色区域拖拽", {
fontSize: 20,
fill: "#999"
});
app.stage.addChild(mouseInfo);
app.stage.addChild(sprite);

let dragTarget = null;
app.stage.interactive = true;
app.stage.hitArea = app.screen;
app.stage.on('pointerup', onDragEnd);
app.stage.on('pointerupoutside', onDragEnd);

function onDragMove(event) {
if (dragTarget) {
// 计算显示对象相对于另一个点的局部位置。
// toLocal (position, from, point, skipUpdate)
console.log(dragTarget.parent);
dragTarget.parent.toLocal(event.global, null, dragTarget.position);
}
}

function onDragStart() {
// 保存拖拽目标
this.alpha = 0.5;
dragTarget = this;
app.stage.on('pointermove', onDragMove);
}

function onDragEnd() {
if (dragTarget) {
app.stage.off('pointermove', onDragMove);
dragTarget.alpha = 1;
dragTarget = null;
}
}
}

init();

</script>
</body>
</html>

更多例子参考官网:https://pixijs.com/examples

本文由 linx(544819896@qq.com) 创作,采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。本文链接为: https://blog.jijian.link/2023-12-05/js-pixi-event/

如果您觉得文章不错,可以点击文章中的广告支持一下!