本教程详细介绍了如何在 matter.js 物理引擎中集成鼠标控制功能，使用户能够通过鼠标拖拽场景中的物体。文章特别强调了在高dpi（例如 data-pixel-ratio="2"）环境下正确配置鼠标坐标缩放的重要性，并通过示例代码展示了 matter.mouseconstraint 和 matter.mouse.setscale 的实际应用，确保鼠标交互的准确性和流畅性。
1. Matter.js 鼠标控制概述
Matter.js 物理引擎提供了一套强大的工具，用于模拟现实世界的物理交互。其中，Matter.MouseConstraint 模块专门设计用于处理用户通过鼠标与物理世界中的物体进行交互。它能够检测鼠标点击、拖拽等事件，并自动将这些交互转换为对物理世界中相应物体的作用力，从而实现物体的抓取和移动。
然而，在实际开发中，尤其是在高DPI（Retina）屏幕或 Canvas 元素设置了 data-pixel-ratio 属性时，鼠标事件报告的坐标可能与 Matter.js 内部物理世界的坐标不匹配。这种不匹配会导致鼠标点击位置与实际抓取物体位置存在偏差，严重影响用户体验。解决这一像素比（Pixel Ratio）问题是实现准确鼠标控制的关键。
2. 环境准备与基础设置
在开始之前，请确保您的项目中已引入 Matter.js 库。您可以通过 CDN 或本地文件引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
接下来，我们需要一个 HTML Canvas 元素作为物理世界的渲染目标。请注意，这里的 data-pixel-ratio="2" 属性是本教程关注的重点，它指示浏览器在绘制时应将 Canvas 的内部尺寸放大两倍以适应高DPI显示，但其 CSS 尺寸保持不变。
<canvas id="canvasM" data-pixel-ratio="2" style="position:relative; z-index:0;"></canvas>
3. 初始化 Matter.js 引擎与世界
我们将创建一个 Matter.js 引擎实例和物理世界，并定义一些
