1.效果
vue引入并使用物理引擎matter.js
2.什么是matter.js?
Matter.js 是一个开源的2D物理引擎，专为Web浏览器设计，使用JavaScript编写。它允许开发者在网页上创建包含物理交互的动态图形和游戏。Matter.js 提供了一系列强大的功能，使得模拟真实世界中的物理行为变得简单，例如碰撞检测、刚体动力学、约束条件等。
3.主要特点：
①易于集成：Matter.js 可以轻松地与现有的HTML5 Canvas或其他Web图形库（如Pixi.js）集成，为网页项目添加物理模拟功能。
高性能：优化的架构设计使其能在多种设备上流畅运行，支持大量的物理对象同时模拟。
②模块化：Matter.js 是高度模块化的，你可以选择只使用需要的功能模块，减少最终应用的体积。
③物理特性丰富：支持静态、动态、运动学等多种类型的物体，以及各种关节、碰撞检测、摩擦力、重力等物理属性的自定义。
④链式API：提供了一套直观的链式调用API，便于构建和配置物理世界及其中的对象。
⑤渲染独立：Matter.js 不直接处理渲染，而是提供了物体的位置和尺寸信息，开发者可以根据需要选择自己的渲染方式。
⑥跨平台：由于基于Web标准，Matter.js 可以运行在任何支持JavaScript的现代浏览器上，包括桌面和移动设备。
基本模块（需要其它详细api介绍文档可看）
| 模块名称 | 说明 |
|---|---|
| 引擎（Engine） | 引擎 Engine 是 Matter.js 的核心组件，用于管理物理世界中的所有对象、计算物体的运动和相互作用。用来模拟真实环境的。 |
| 渲染器（Render） | 渲染器 Render 用于将物理世界中的对象可视化。意思就是它能将物体渲染到屏幕上。 |
| 复合体（Composite） | 是包含多个刚体和约束的容器，它们可以作为单个物理对象进行操作。 |
| 刚体（Body） | 表示具有物理属性的实体，如形状、质量和速度等。刚体可以是各种形状，例如矩形、圆形、多边形等。 |
| 约束（Constraint） | 用于约束刚体的相对运动，例如让两个刚体之间的距离保持不变、限制旋转等。 |
| 循环模块 (Runner) | Runner 用于管理和控制物理引擎的主循环。 |
npm install matter-js
5.在需要使用的页面中引入
import Matter from "matter-js";
6.详细代码
<template><div><div id="c"></div></div>
</template><script>
import Matter from "matter-js";export default {mounted() {this.$nextTick(() => {// 确保DOM已更新this.initMatter();});},methods: {initMatter() {const Engine = Matter.Engine;const Render = Matter.Render;const Bodies = Matter.Bodies;const Composite = Matter.Composite;const Runner = Matter.Runner;// 3. 创建引擎let engine = Engine.create();// 4. 创建渲染器，并将引擎连接到画布上let render = Matter.Render.create({element: document.getElementById("c"), // 绑定页面元素engine: engine, // 绑定引擎options: {wireframes: false}});// 5-1. 创建两个正方形let boxA = Bodies.rectangle(400, 200, 80, 80, {frictionAir: 0.1, // 设置空气阻力restitution: 1, // 设置弹力render: {sprite: {xScale: 0.3,yScale: 0.3,// 使用精灵texture:"https://img0.baidu.com/it/u=105699685,1942932424&fm=253&fmt=auto&app=138&f=JPEG" // 图片纹理位置}}});// let boxB = Bodies.rectangle(450, 50, 80, 80);let boxB = Bodies.circle(450, 40, 40, {frictionAir: 0.1, // 设置空气阻力render: {strokeStyle: "#3490de", // 设置边框颜色lineWidth: 20 // 设置边框宽度}}); //圆形 x,y,半径//正多边形let polygon = Matter.Bodies.polygon(450, 200, 7, 40, {frictionAir: 0.1 // 设置空气阻力});// 三角形let triangle = Matter.Bodies.trapezoid(450, 200, 80, 80, 1, {mass: 0.4 //质量 mass 质量越大，惯性越大// frictionAir: 0.1 // 设置空气阻力});// 定义顶点const vertices = [{ x: 0, y: 0 },{ x: 50, y: 0 },{ x: 50, y: 50 },{ x: 25, y: 75 },{ x: 0, y: 50 }];// 自定义多边形const trapezoid = Matter.Bodies.fromVertices(450, 100, vertices);// 5-2. 创建地面，将isStatic设为true，表示物体静止let ground = Bodies.rectangle(400, 610, 810, 60, {isStatic: true,render: {fillStyle: "#cccccc"}});// 创建鼠标实例let mouse = Matter.Mouse.create(render.canvas);// 给鼠标添加约束let mouseConstraint = Matter.MouseConstraint.create(engine, {mouse: mouse,constraint: {stiffness: 0.2,render: {visible: false // 默认为 true，会显示鼠标拖拽轨迹}}});// 6. 将所有物体添加到世界中Composite.add(engine.world, [boxA,boxB,triangle,polygon,trapezoid,ground,mouseConstraint]);// 7. 执行渲染操作Render.run(render);// 8. 创建运行方法var runner = Runner.create();// 9. 运行渲染器Runner.run(runner, engine);}}
};
</script>
 详解：打造极致PDF阅读体验)
