Matter.js 鼠标交互控制集成指南-html教程-PHP中文网

Matter.js 鼠标交互控制集成指南

本教程详细介绍了如何在 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);

        // ... (后续的自定义渲染循环代码)

登录后复制

关键点解释：

BRANDMARK

AI帮你设计Logo、图标、名片、模板……等

180

查看详情

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 应用中集成鼠标交互控制，为用户提供直观且有趣的物理模拟体验。

以上就是Matter.js 鼠标交互控制集成指南的详细内容，更多请关注php中文网其它相关文章！