Matter-JS Composite.add 符合材料添加约束

Myth丶恋晨 2022-03-30 08:35 182阅读 0赞

**目录**

Composite

Composite.add

--------------------

# Composite #

1、[Matter.Composite][] 模块包含创建符合体的方法

2、Composite 复合体是 `Matter.Body 刚体、`[Matter.Constraint ][Matter.Constraint]约束以及 `Matter.Composite 复合体的集合。`

3、比如一个矩形(刚体)、一个圆形(刚体)、通过约束即可合成一个复合体，同时复合体与复合体又可以组成更复杂的复合体。

> The `Matter.Composite` module contains methods for creating and manipulating composite bodies. A composite body is a collection of `Matter.Body`, `Matter.Constraint` and other `Matter.Composite`, therefore composites form a tree structure. It is important to use the functions in this module to modify composites, rather than directly modifying their properties. Note that the `Matter.World` object is also a type of `Matter.Composite` and as such all composite methods here can also operate on a `Matter.World`.

# Composite.add #

1、Matter.Composite.add(composite, object) 是一个通用添加函数，可以将一个或多个主体(Body)、约束(Constraint)或复合体(Composite )添加到给定的复合体(Composite)。

2、Composite.add 函数官方源码：[http://brm.io/matter-js/docs/files/src\_body\_Composite.js.html\#l69][http_brm.io_matter-js_docs_files_src_body_Composite.js.html_l69]

![20190105150744643.gif][]

如上所示：一个 10 行10列的 圆形 stack。其中第 3列 、第8列通过约束进行连接成一个复合体，然后整列进行固定。

现在使用 Composite.add 来为复合体添加约束，实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Matter-JS</title>
        
        
        <script src="../js/matter_0.14.2.js"></script>
        <script type="text/javascript">
            var stageWidth = 800;//舞台宽度
            var stageHeight = 500;//舞台高度
            var Engine = Matter.Engine;//引擎
            var Render = Matter.Render;//渲染器
            var World = Matter.World;//世界
            var Constraint = Matter.Constraint;//约束
            var MouseConstraint = Matter.MouseConstraint;//鼠标控制
            var Bodies = Matter.Bodies;//内置常见刚体
            var Composites = Matter.Composites;//符合材料
            var Composite = Matter.Composite;//混合体
            var Common = Matter.Common;//公用模块
            var Body = Matter.Body;//刚体
    
            window.onload = function () {
                matterJS();
            }
    
            /**Matter-JS*/
            function matterJS() {
                var engine = Engine.create();//创建引擎
                var render = Render.create({//创建渲染器
                    engine: engine,//渲染创建好的引擎
                    /**渲染页面的body元素，即会在body标签自动新建<canvas>画布，同理如果element的值是某个div元素-
                     * 则会在div下自动新建canvas，canvas的尺寸是options中的width、height
                     * */
                    element: document.body,
                    options: {
                        width: stageWidth,//画布的宽度
                        height: stageHeight,//画布的高度
                        wireframes: true,//线框模式,默认false不使用线框模式
                        showAngleIndicator: true,//是否显示角度,默认false
                        showVelocity: true,//是否显示速度,默认false
                        showCollisions: true,//是否显示碰撞点,默认false
                    }
                });
                Engine.run(engine);//运行引擎
                Render.run(render);//运行渲染器
                /**设置鼠标控制*/
                var mouseConstraint = MouseConstraint.create(engine, {});
    
                /**创建一个圆形堆叠复合体*/
                var stack_cicle = Composites.stack(130, 100, 10, 10, 20, 0, function (x, y) {
                    return Bodies.circle(x, y, 20);
                });
    
                /**约束复合体中的第3列，第8列*/
                constraintComposite(stack_cicle, 3);
                constraintComposite(stack_cicle, 8);
    
                /**将物体以及鼠标控制添加到世界中*/
                World.add(engine.world, [mouseConstraint, stack_cicle]);
                /**为世界4周添加4面墙*/
                World.add(engine.world, create4Wall(Bodies));
            }
    
            /**约束复合体中的刚体
             * stack：被约束的复合体
             * columns：被约束的复合体中的具体的列数
             * */
            function constraintComposite(stack, columns) {
                /**-------约束第 columns 列中的所有刚体Body-------------*/
                /**先将列中的第一个刚体设置为固定*/
                stack.bodies[columns - 1].isStatic = true;
                /**将第3列相邻行的球进行约束*/
                for (var i = 0; i < 9; i++) {
                    /**注意：Composite.add(composite, object) 方法，只是对composite在 bodyA、bodyB中指定
                     * 的物体进行添加 object,这里是 Constraint 约束，add添加完成后，就意味着 composite 已经有了约束
                     * 如果只是单纯的 Constraint.create，则还要将返回值添加到世界中去的，add 则不再需要
                     * */
                    Composite.add(stack, Constraint.create({
                        bodyA: stack.bodies[columns - 1 + (i * 10)],
                        pointA: {x: 0, y: 20},
                        bodyB: stack.bodies[columns - 1 + (i * 10) + 10],
                        pointB: {x: 0, y: -20},
                        length: 3,//约束点的长度
                        stiffness: 0.6//刚度值( 0,1]，值越大，物体刚度越强，越不容易拉伸
                    }));
                }
            }
    
            /**创建4面墙-强制物体在墙内运动*/
            function create4Wall(Bodies) {
                var ground_top = Bodies.rectangle(stageWidth / 2, 5, stageWidth, 40, {isStatic: true});
                var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true});
                var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight - 5, stageWidth, 40, {isStatic: true});
                var ground_left = Bodies.rectangle(10, stageHeight / 2, 40, stageHeight, {isStatic: true});
                return [ground_top, ground_right, ground_bottom, ground_left];
            }
        </script>
    </head>
    <body>
    </body>
    </html>

官网 [http://brm.io/matter-js/demo/\#chains][http_brm.io_matter-js_demo_chains] 中也有使用 Composite.add.

[Matter.Composite]: http://brm.io/matter-js/docs/classes/Composite.html
[Matter.Constraint]: http://brm.io/matter-js/docs/classes/Constraint.html
[http_brm.io_matter-js_docs_files_src_body_Composite.js.html_l69]: http://brm.io/matter-js/docs/files/src_body_Composite.js.html#l69
[20190105150744643.gif]: /images/20220330/8df71164089040f5aaa6ecd207e0e652.png
[http_brm.io_matter-js_demo_chains]: http://brm.io/matter-js/demo/#chains