在 Matter.js 中实现精确的鼠标交互控制

云芳小哥_8983

发布时间：2025-12-08 19:30:52

521人浏览过

来源于php中文网

原创

在 Matter.js 中实现精确的鼠标交互控制

本教程详细介绍了如何在 matter.js 物理引擎中集成鼠标控制功能，以实现对物理体的拖拽与交互。文章着重解决了在处理高dpi屏幕时常见的鼠标坐标缩放问题，通过正确配置 `matter.mouseconstraint` 和运用 `matter.mouse.setscale` 方法，确保鼠标与物理世界的精确对应，从而提供流畅的用户体验。

引言：Matter.js 交互式物理模拟

Matter.js 是一个功能强大且易于使用的 2D 物理引擎，广泛应用于网页游戏、交互式动画和模拟等场景。为了让用户能够直接与物理世界中的物体进行互动，例如拖拽、点击等，集成鼠标控制功能是必不可少的一步。本教程将引导您如何在 Matter.js 项目中正确设置鼠标控制，并特别关注在现代高DPI显示器上可能出现的坐标缩放问题。

Matter.js 鼠标控制核心组件

Matter.js 提供了两个核心模块来处理鼠标交互：

Matter.Mouse: 这个模块用于创建和管理鼠标实例，它负责捕获鼠标在指定 HTML 元素（通常是
Matter.MouseConstraint: 这是一个约束（Constraint）模块，它将 Matter.Mouse 实例与物理引擎的世界连接起来。当鼠标在物理世界中按下并拖动一个物体时，MouseConstraint 会创建一个临时的弹性约束，使得该物体能够跟随鼠标移动。

实现步骤与代码示例

我们将基于一个 Matter.js 的基本设置，逐步添加鼠标控制功能。

1. 初始化 Matter.js 环境

首先，我们需要设置 Matter.js 引擎、世界、以及一些基本的物理体（例如地面和两个方块）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<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, // 如果不使用自定义渲染，Runner会自动更新引擎和渲染
        Bodies = Matter.Bodies,
        Composite = Matter.Composite,
        World = Matter.World;

    // 创建物理引擎
    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;
</script>

2. 创建自定义渲染循环并更新引擎

在某些场景下，开发者可能需要自定义渲染逻辑，而不是使用 Matter.js 内置的 Render 模块。在这种情况下，必须在自定义的 requestAnimationFrame 循环中手动调用 Matter.Engine.update(engine) 来推进物理世界的模拟。

<script>
    // ... (接上面的初始化代码) ...

    (function render() {
        var bodies = Composite.allBodies(engine.world);

        window.requestAnimationFrame(render);

        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'; // 使用 fillStyle 而不是 fill
        context.strokeStyle = '#000';
        context.fill(); // 填充图形
        context.stroke(); // 描边图形

        // 关键：手动更新物理引擎
        Matter.Engine.update(engine);
    })();
</script>

注意： 在上述代码中，我们移除了 Runner.run(runner, engine);，并添加了 Matter.Engine.update(engine); 到自定义的 render 循环中。这意味着物理引擎的更新现在由我们的 requestAnimationFrame 循环驱动。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

3. 集成鼠标交互

现在，我们将添加鼠标控制的核心逻辑。这包括创建鼠标实例、处理缩放，以及创建鼠标约束。

<script>
    // ... (接上面的渲染循环代码) ...

    // 创建鼠标实例，并将其绑定到 Canvas 元素
    var canvmouse = Matter.Mouse.create(document.getElementById('canvasM'));

    // 处理高DPI屏幕缩放问题
    // 如果 Canvas 元素有 data-pixel-ratio="2" 属性，通常意味着其内部渲染尺寸是CSS尺寸的两倍
    // 因此，鼠标坐标也需要相应缩放，以匹配物理世界坐标
    Matter.Mouse.setScale(canvmouse, { x: 2, y: 2 });

    // 创建鼠标约束
    // mouseControl 将负责捕获鼠标事件，并将其转换为物理世界中的交互
    var mouseControl = Matter.MouseConstraint.create(engine, {
        mouse: canvmouse,
        constraint: {
            stiffness: 0.2, // 约束的刚度
            render: {
                visible: false // 不渲染鼠标约束的连接线
            }
        }
    });

    // 将鼠标约束添加到物理世界中
    Composite.add(world, mouseControl);

    // render.mouse = mouse; // 这行代码在Matter.js中没有实际作用，可以移除
</script>

完整示例代码

将以上所有代码片段组合起来，就得到了一个功能完整的 Matter.js 鼠标控制示例：

<!DOCTYPE html>
<html>
<head>
    <title>Matter.js 鼠标控制示例</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; background-color: #f0f0f0; 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);
        })();

        // 创建鼠标实例，并将其绑定到 Canvas 元素
        var canvmouse = Mouse.create(canvas);

        // 处理高DPI屏幕缩放问题
        // 根据 data-pixel-ratio 属性设置鼠标坐标的缩放比例
        // 在此示例中，data-pixel-ratio="2" 表示像素比为2
        Mouse.setScale(canvmouse, { x: 2, y: 2 });

        // 创建鼠标约束
        var mouseControl = MouseConstraint.create(engine, {
            mouse: canvmouse,
            constraint: {
                stiffness: 0.2,
                render: {
                    visible: false
                }
            }
        });

        // 将鼠标约束添加到物理世界中
        Composite.add(world, mouseControl);
    </script>
</body>
</html>

注意事项

高DPI屏幕适配 (Matter.Mouse.setScale): 这是实现精确鼠标控制的关键。现代显示器（如 Retina 屏）通常具有较高的像素密度。如果 Canvas 元素通过 CSS 设置了较小的尺寸，但其内部渲染尺寸（canvas.width, canvas.height）被设置为 CSS 尺寸的倍数（例如，通过 data-pixel-ratio="2" 或 JavaScript 手动设置），那么鼠标事件报告的坐标（相对于 CSS 尺寸）将与 Canvas 内部渲染的物理坐标不匹配。Matter.Mouse.setScale(mouseInstance, {x: scale, y: scale}) 方法能够校正这一差异，确保鼠标点击或拖拽的物理坐标与 Matter.js 世界中的坐标一致。在本例中，data-pixel-ratio="2" 意味着需要将鼠标坐标放大两倍。
引擎更新机制:
- 如果您使用 Matter.Runner.run(runner, engine)，Runner 会自动在每个动画帧更新物理引擎和（如果配置了）渲染器。
- 如果您像本教程一样，使用自定义的 requestAnimationFrame 循环来渲染，那么必须在循环内部手动调用 Matter.Engine.update(engine) 来推进物理模拟。否则，物体将不会移动或响应重力。
组件实例化位置: Matter.Mouse 和 Matter.MouseConstraint 应该在主程序初始化阶段创建一次，并添加到世界中。不应在 render 循环内部重复创建它们，这会导致性能问题和不可预测的行为。

总结

通过本教程，您应该已经掌握了在 Matter.js 中实现鼠标控制的完整流程。关键在于正确地实例化 Matter.Mouse 和 Matter.MouseConstraint，并特别注意通过 Matter.Mouse.setScale 方法来解决高DPI屏幕带来的坐标缩放问题。理解引擎更新机制（手动更新或使用 Runner）也对于构建流畅的物理模拟至关重要。遵循这些步骤，您将能够为您的 Matter.js 应用添加直观且响应迅速的交互体验。

如何用CSS3实现数字滚动的翻牌器过渡动画？

Linux 中 Nginx 怎么通过 root 配置实现动静分离

为什么现代前端UI框架中普遍采用全局border-box盒模型？

如何用CSS实现无缝循环滚动的新闻播报跑马灯？

怎样在老旧浏览器中处理CSS calc表达式计算精度异常