本教程详细介绍了如何在 matter.js 物理引擎中集成鼠标交互控制。我们将利用 `matter.mouseconstraint` 和 `matter.mouse` 模块，实现通过鼠标拖动场景中的物理体。文章重点讲解了高 dpi 屏幕下鼠标坐标缩放的关键配置 `matter.mouse.setscale`，并提供了一个完整的示例代码，帮助开发者快速掌握 matter.js 的鼠标交互功能。
1. Matter.js 简介与核心模块
Matter.js 是一个用于 Web 的 2D 物理引擎，它提供了创建刚体、复合体、约束以及模拟物理交互的能力。要实现鼠标交互，我们主要会用到以下两个核心模块：
- Matter.Engine: 物理引擎实例，负责管理整个物理世界的更新。
- Matter.World: 物理世界实例，包含所有物理体和约束。
- Matter.Bodies: 用于创建各种基本形状的物理体，如矩形、圆形等。
- Matter.Composite: 用于管理物理体和约束的集合。
- Matter.Mouse: 用于创建一个鼠标输入实例，捕获鼠标事件。
- Matter.MouseConstraint: 鼠标约束模块，它将鼠标输入转换为一个物理约束，允许用户拖动物理体。
2. 环境搭建与基本设置
首先，我们需要在 HTML 页面中引入 Matter.js 库，并设置一个用于渲染的 <canvas> 元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matter.js 鼠标控制示例</title>
<!-- 引入 Matter.js 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<style>
body { margin: 0; overflow: hidden; } /* 移除默认边距，隐藏滚动条 */
canvas { display: block; background-color: #f0f0f0; } /* 确保 canvas 独占一行 */
</style>
</head>
<body>
<!-- 用于渲染物理世界的 canvas 元素 -->
<canvas id="matterCanvas" data-pixel-ratio="2"></canvas>
<script>
// Matter.js 模块别名
var Engine = Matter.Engine,
World = Matter.World,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint;
// 创建物理引擎
var engine = Engine.create();
var world = engine.world;
// 获取窗口尺寸
var w = window.innerWidth;
var h = window.innerHeight;
// 获取 canvas 元素并设置尺寸
var canvas = document.getElementById('matterCanvas');
var context = canvas.getContext('2d');
canvas.width = w - 130; // 示例中减去一些边距
canvas.height = h * 0.888; // 示例中设置高度比例
// 创建物理体：两个方块和地面
var boxA = Bodies.rectangle(w * 0.5 + 30, h * 0.7, 80, 80);
var boxB = Bodies.rectangle(w * 0.5 + 60, 50, 80, 80);
var ground = Bodies.rectangle(w * 0.5 - 1, h * 0.888 + h * 0.05 - 30 + 1.5, w, h * 0.1, { isStatic: true });
// 将所有物理体添加到世界中
Composite.add(world, [boxA, boxB, ground]);
// ... 后续的鼠标控制和渲染代码将在此处添加
</script>
</body>
</html>在上述代码中，我们初始化了 Matter.js 引擎和世界，并创建了几个基本的物理体（两个方块和一个静态地面）。canvas 元素上的 data-pixel-ratio="2" 属性是一个关键点，它表示 canvas 的实际渲染分辨率是其 CSS 尺寸的两倍，这在 Retina 或其他高 DPI 屏幕上很常见，可以使渲染更清晰。然而，这也意味着鼠标坐标需要进行相应的缩放。
3. 实现鼠标交互控制
要添加鼠标交互，我们需要创建 Matter.Mouse 实例来监听 canvas 上的鼠标事件，然后将其与 Matter.MouseConstraint 结合，将鼠标行为转换为物理世界中的约束。
// ... (接上面的代码)
// 1. 创建鼠标实例
// Matter.Mouse.create 方法接收一个 HTML 元素作为参数，通常是 canvas
var mouse = Mouse.create(canvas);
// 2. 处理高 DPI 屏幕下的鼠标坐标缩放
// 如果 canvas 设置了 data-pixel-ratio 属性，鼠标坐标需要按此比例缩放，
// 否则 Matter.js 内部的鼠标坐标与渲染坐标不匹配，导致拖动不准确。
// 示例中的 canvas 有 data-pixel-ratio="2"，所以需要 x:2, y:2 的缩放。
Mouse.setScale(mouse, { x: 2, y: 2 });
// 3. 创建鼠标约束实例
// MouseConstraint.create 接收引擎和鼠标实例作为参数
var mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2, // 约束的刚度
render: {
visible: false // 不显示鼠标约束线
}
}
});
// 4. 将鼠标约束添加到世界中
// 这样鼠标约束才能参与物理模拟
Composite.add(world, mouseConstraint);
// ... (后续的自定义渲染循环代码)关键点解释：
- Mouse.create(canvas): 创建一个 Mouse 对象，它会自动监听指定 canvas 上的鼠标事件。
- Mouse.setScale(mouse, { x: 2, y: 2 }): 这是解决高 DPI 屏幕下鼠标坐标不准确问题的关键。如果你的 canvas 元素的 data-pixel-ratio 属性设置为 N，那么你就需要将 Mouse 实例的 x 和 y 缩放因子都设置为 N。这是因为 Matter.js 内部的鼠标坐标是基于 canvas 的 CSS 像素尺寸，而渲染时可能使用的是实际的物理像素尺寸。
- MouseConstraint.create(engine, { mouse: mouse, ... }): 创建一个 MouseConstraint 对象。它会监听 mouse 实例的事件，并在鼠标点击或拖动时，在物理世界中创建一个临时的弹性约束，将鼠标位置与最近的物理体连接起来，从而实现拖动效果。stiffness 属性控制拖动时的“弹性”，render.visible: false 则可以隐藏鼠标拖动时显示的那条连接线。
4. 自定义渲染循环
在 Matter.js 中，通常可以使用 Matter.Render.create() 来自动处理渲染和引擎更新。但如果需要更精细的控制，或者像本例中那样使用 canvas 的 2D 上下文进行自定义绘制，则需要手动实现渲染循环。
// ... (接上面的鼠标控制代码)
// 自定义渲染循环函数
(function render() {
// 请求下一帧动画
window.requestAnimationFrame(render);
// 清除 canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// 获取世界中的所有物理体
var bodies = Composite.allBodies(engine.world);
context.beginPath(); // 开始绘制路径
// 遍历所有物理体并绘制
for (var i = 0; i < bodies.length; i += 1) {
var vertices = bodies[i].vertices;
context.moveTo(vertices[0].x, vertices[0].y);
for (var j = 1; j < vertices.length; j += 1) {
context.lineTo(vertices[j].x, vertices[j].y);
}
context.lineTo(vertices[0].x, vertices[0].y); // 闭合路径
}
context.lineWidth = 3;
context.fillStyle = '#fff'; // 填充颜色
context.strokeStyle = '#000'; // 描边颜色
context.fill(); // 填充
context.stroke(); // 描边
// 关键：在自定义渲染循环中手动更新物理引擎
// 如果不调用此方法，物理世界将不会模拟和更新
Engine.update(engine);
})();关键点解释：
- window.requestAnimationFrame(render): 这是浏览器提供的优化动画渲染的方法，它会在浏览器准备好绘制下一帧时调用指定的函数，确保动画流畅且节能。
- context.clearRect(...): 在每一帧开始时清除 canvas 的上一帧内容。
- 自定义绘制逻辑: 通过遍历 Composite.allBodies(engine.world) 获取所有物理体，然后利用每个物理体的 vertices 属性来绘制其多边形轮廓。
- Engine.update(engine): 非常重要！ 如果你没有使用 Matter.Runner.run() 或 Matter.Render.create() 来自动更新引擎，那么你必须在你的自定义渲染循环中手动调用 Engine.update(engine) 来推进物理模拟，否则物理体将不会移动或响应交互。
5. 完整示例代码
将以上所有代码片段组合起来，就得到了一个完整的 Matter.js 鼠标控制示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matter.js 鼠标控制集成指南</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; background-color: #f0f0f0; border: 1px solid #ccc; }
</style>
</head>
<body>
<canvas id="matterCanvas" data-pixel-ratio="2"></canvas>
<script>
// Matter.js 模块别名
var Engine = Matter.Engine,
World = Matter.World,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint;
// 创建物理引擎
var engine = Engine.create();
var world = engine.world;
// 获取窗口尺寸
var w = window.innerWidth;
var h = window.innerHeight;
// 获取 canvas 元素并设置尺寸
var canvas = document.getElementById('matterCanvas');
var context = canvas.getContext('2d');
canvas.width = w - 130; // 示例中减去一些边距
canvas.height = h * 0.888; // 示例中设置高度比例
// 创建物理体：两个方块和地面
var boxA = Bodies.rectangle(w * 0.5 + 30, h * 0.7, 80, 80);
var boxB = Bodies.rectangle(w * 0.5 + 60, 50, 80, 80);
var ground = Bodies.rectangle(w * 0.5 - 1, h * 0.888 + h * 0.05 - 30 + 1.5, w, h * 0.1, { isStatic: true });
// 将所有物理体添加到世界中
Composite.add(world, [boxA, boxB, ground]);
// 1. 创建鼠标实例
var mouse = Mouse.create(canvas);
// 2. 处理高 DPI 屏幕下的鼠标坐标缩放
// 如果 canvas 的 data-pixel-ratio 为 2，则鼠标坐标也需缩放 2 倍
Mouse.setScale(mouse, { x: 2, y: 2 });
// 3. 创建鼠标约束实例
var mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false // 隐藏鼠标拖动时显示的约束线
}
}
});
// 4. 将鼠标约束添加到世界中
Composite.add(world, mouseConstraint);
// 自定义渲染循环函数
(function render() {
window.requestAnimationFrame(render);
// 清除 canvas
context.clearRect(0, 0, canvas.width, canvas.height);
var bodies = Composite.allBodies(engine.world);
context.beginPath();
for (var i = 0; i < bodies.length; i += 1) {
var vertices = bodies[i].vertices;
context.moveTo(vertices[0].x, vertices[0].y);
for (var j = 1; j < vertices.length; j += 1) {
context.lineTo(vertices[j].x, vertices[j].y);
}
context.lineTo(vertices[0].x, vertices[0].y);
}
context.lineWidth = 3;
context.fillStyle = '#fff';
context.strokeStyle = '#000';
context.fill();
context.stroke();
// 关键：在自定义渲染循环中手动更新物理引擎
Engine.update(engine);
})();
</script>
</body>
</html>6. 注意事项与总结
- 高 DPI 缩放 (Matter.Mouse.setScale): 这是最容易被忽略但又至关重要的一步。如果你的 canvas 使用了 data-pixel-ratio 或通过 CSS 进行了缩放以适应高 DPI 屏幕，务必使用 Matter.Mouse.setScale 来调整鼠标坐标，确保鼠标点击位置与物理体位置正确对应。
- 引擎更新 (Engine.update): 如果你选择不使用 Matter.Runner 或 Matter.Render 的自动更新机制，而采用自定义的 requestAnimationFrame 渲染循环，那么必须在每一帧中显式调用 Matter.Engine.update(engine) 来推进物理模拟。
- MouseConstraint 的初始化位置: MouseConstraint 应该在物理世界和渲染循环设置完成后，且在渲染循环外部初始化，因为它只需要创建一次并添加到世界中即可。
- 渲染方式的选择: 对于简单的场景，可以使用 Matter.Render.create() 来快速设置渲染器，它会自动处理引擎更新和渲染。但对于需要更复杂或自定义绘制效果的场景，自定义 canvas 2D 上下文绘制配合 requestAnimationFrame 是更灵活的选择。
通过遵循本教程的步骤，你将能够成功地在 Matter.js 应用中集成鼠标交互控制，为用户提供直观且有趣的物理模拟体验。
