Composite

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

2、Composite 复合体是 Matter.Body 刚体、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

如上所示：一个 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>
    <!--matter-js cdnjs地址，本地没有 Matter.js 时，可以使用这个-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>-->
    <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 中也有使用 Composite.add.

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

Composite

Composite.add

猜你喜欢