本教程详细介绍了如何在 matter.js 物理引擎中集成鼠标交互控制，使用户能够通过鼠标拖拽场景中的物体。文章将重点讲解 `matter.mouse` 和 `matter.mouseconstraint` 的正确配置，特别是如何处理高 dpi 屏幕下的坐标缩放问题，并提供完整的示例代码和注意事项，帮助开发者轻松实现直观的物理场景交互。
Matter.js 鼠标交互控制：实现拖拽功能
Matter.js 是一个功能强大的 2D 物理引擎，常用于创建交互式网页动画和游戏。为了增强用户体验，为物理世界添加鼠标交互功能是常见的需求，例如拖拽物体。本文将详细指导您如何在 Matter.js 中正确设置鼠标控制，并解决在不同屏幕分辨率下可能遇到的坐标缩放问题。
1. Matter.js 核心组件回顾
在开始之前，我们先回顾 Matter.js 的几个核心模块：
- Matter.Engine: 物理引擎的核心，负责管理物理世界的更新。
- Matter.Render: （可选）负责将物理世界渲染到 HTML Canvas。本教程将使用自定义渲染循环。
- Matter.Runner: （可选）一个简单的引擎运行器，可以自动更新引擎和渲染。本教程将手动更新引擎。
- Matter.Bodies: 用于创建各种形状的物理实体，如矩形、圆形等。
- Matter.Composite: 用于管理物理实体和约束的集合，通常指代整个物理世界。
- Matter.World: Composite 的别名，通常用来指代主世界。
2. 引入 Matter.js 库
首先，确保您的 HTML 文件中已经引入了 Matter.js 库。您可以从 CDN 引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
3. 设置 HTML Canvas 元素
创建一个用于渲染 Matter.js 场景的 canvas> 元素。这里我们添加 data-pixel-ratio="2" 属性，这在高 DPI（Retina）屏幕上非常重要，因为它会影响 Canvas 的实际绘制尺寸与 CSS 尺寸的比例。
<canvas id="canvasM" data-pixel-ratio="2" style="position:relative; z-index:0;"></canvas>
4. 初始化 Matter.js 引擎和世界
接下来，在 JavaScript 中初始化 Matter.js 引擎，创建物理世界，并添加一些基本的物理实体（如盒子和地面）。
// 模块别名
var Engine = Matter.Engine,
Render = Matter.Render, // 尽管这里我们不直接使用Render.create，但仍声明
Runner = Matter.Runner, // 尽管这里我们不直接使用Runner.run，但仍声明
Bodies = Matter.Bodies,
Composite = Matter.Composite,
World = Matter.World,
Mouse = Matter.Mouse, // 声明Mouse
MouseConstraint = Matter.MouseConstraint; // 声明MouseConstraint
// 创建引擎
var engine = Engine.create();
var world = engine.world; // 获取物理世界
// 获取窗口尺寸
var w = window.innerWidth;
var h = window.innerHeight;
// 创建两个盒子和地面
var boxA = Bodies.rectangle(0.5 * w + 30, 0.7 * h, 80, 80);
var boxB = Bodies.rectangle(0.5 * w + 60, 50, 80, 80);
var ground = Bodies.rectangle(0.5 * w - 1, 0.888 * h + 0.05 * h - 30 + 1.5, w, 0.1 * h, { isStatic: true });
// 将所有实体添加到世界中
Composite.add(world, [boxA, boxB, ground]);5. 自定义 Canvas 渲染循环
Matter.js 提供了 Matter.Render 模块进行渲染，但您也可以选择自定义渲染循环，以便更精细地控制绘制过程。这里我们创建一个简单的 render() 函数来绘制物理实体，并在其中更新引擎状态。
var canvas = document.getElementById('canvasM');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth - 130;
canvas.height = 0.888 * window.innerHeight;
(function render() {
// 获取世界中的所有实体
var bodies = Composite.allBodies(engine.world);
// 请求下一帧动画
window.requestAnimationFrame(render);
// 清除画布
context.clearRect(0, 0, canvas.width, canvas.height);
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(); // 绘制边框
// 更新物理引擎状态
Matter.Engine.update(engine);
})();注意：在自定义渲染循环中，我们手动调用了 Matter.Engine.update(engine); 来推进物理引擎的时间步。如果您使用 Matter.Runner.run(runner, engine);，则不需要手动调用 Engine.update，因为 Runner 会自动处理。但为了更灵活的控制，本教程采用手动更新引擎的方式。
6. 添加鼠标交互控制
这是实现鼠标拖拽的核心部分。我们需要使用 Matter.Mouse 来捕获鼠标事件，并使用 Matter.MouseConstraint 将这些事件转化为物理世界中的交互。
关键点：处理 pixelRatio 缩放
如果您的 Canvas 元素设置了 data-pixel-ratio 属性（例如 data-pixel-ratio="2"），这意味着 Canvas 的内部绘制尺寸是其 CSS 尺寸的两倍。为了让 Matter.js 捕获的鼠标坐标与物理世界中的坐标正确对应，您需要对 Matter.Mouse 实例进行缩放。
// 创建一个Matter.Mouse实例，关联到canvas
var canvmouse = Mouse.create(canvas);
// 根据canvas的data-pixel-ratio属性进行鼠标坐标缩放
// 如果canvas的data-pixel-ratio是2，则鼠标坐标也需要乘以2
// 这样才能在高DPI屏幕上正确映射鼠标位置到物理世界
Matter.Mouse.setScale(canvmouse, { x: 2, y: 2 });
// 创建Matter.MouseConstraint实例
// 它将鼠标事件转换为物理约束，允许用户拖拽物体
var mouseControl = MouseConstraint.create(engine, {
mouse: canvmouse, // 关联我们创建的鼠标实例
constraint: {
stiffness: 0.2, // 约束的刚度
render: {
visible: false // 不渲染鼠标约束线
}
}
});
// 将鼠标约束添加到世界中
Composite.add(world, mouseControl);7. 完整示例代码
将以上所有代码片段组合起来，就得到了一个完整的、支持鼠标拖拽的 Matter.js 示例：
<!DOCTYPE html>
<html>
<head>
<title>Matter.js 鼠标拖拽控制</title>
<style>
body { margin: 0; overflow: hidden; background-color: #f0f0f0; }
canvas { display: block; background-color: #eee; border: 1px solid #ccc; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
</head>
<body>
<canvas id="canvasM" data-pixel-ratio="2" style="position:relative; z-index:0;"></canvas>
<script>
// 模块别名
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
World = Matter.World,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint;
// 创建引擎
var engine = Engine.create();
var world = engine.world;
// 获取窗口尺寸
var w = window.innerWidth;
var h = window.innerHeight;
// 创建两个盒子和地面
var boxA = Bodies.rectangle(0.5 * w + 30, 0.7 * h, 80, 80);
var boxB = Bodies.rectangle(0.5 * w + 60, 50, 80, 80);
var ground = Bodies.rectangle(0.5 * w - 1, 0.888 * h + 0.05 * h - 30 + 1.5, w, 0.1 * h, { isStatic: true });
// 将所有实体添加到世界中
Composite.add(world, [boxA, boxB, ground]);
// 获取 Canvas 元素并设置尺寸
var canvas = document.getElementById('canvasM');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth - 130;
canvas.height = 0.888 * window.innerHeight;
// 自定义渲染循环
(function render() {
var bodies = Composite.allBodies(engine.world);
window.requestAnimationFrame(render);
context.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
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();
// 更新物理引擎状态
Matter.Engine.update(engine);
})();
// 添加鼠标交互控制
var canvmouse = Mouse.create(canvas);
// 根据canvas的data-pixel-ratio属性进行鼠标坐标缩放
// 确保鼠标坐标与物理世界坐标正确映射
Matter.Mouse.setScale(canvmouse, { x: 2, y: 2 }); // 对应 data-pixel-ratio="2"
var mouseControl = MouseConstraint.create(engine, {
mouse: canvmouse,
constraint: {
stiffness: 0.2,
render: {
visible: false // 隐藏鼠标约束线
}
}
});
// 将鼠标约束添加到世界中
Composite.add(world, mouseControl);
</script>
</body>
</html>8. 注意事项与总结
- pixelRatio 的重要性: 如果您的 Canvas 元素设置了 data-pixel-ratio 属性（例如 data-pixel-ratio="2"），则必须使用 Matter.Mouse.setScale(canvmouse, { x: 2, y: 2 }); 来调整鼠标坐标，否则鼠标点击的位置将与物理世界中的实际位置不符，导致拖拽不准确。
- 渲染与引擎更新: 在自定义渲染循环中，确保调用 Matter.Engine.update(engine); 来推进物理模拟。如果您使用 Matter.Runner，它会替您完成此操作。
- MouseConstraint 配置: MouseConstraint.create() 的 constraint 选项允许您自定义拖拽约束的行为，例如 stiffness（刚度）可以调整拖拽的“弹性”感觉，render.visible: false 可以隐藏拖拽时出现的连接线。
- 性能优化: 对于复杂的场景，自定义渲染循环可能需要进一步优化，例如只绘制视口内的物体。
通过以上步骤，您已经成功在 Matter.js 物理世界中实现了鼠标拖拽交互功能。理解 Matter.Mouse 和 Matter.MouseConstraint 的工作原理，并正确处理高 DPI 屏幕下的坐标缩放，是创建流畅用户体验的关键。
