matter.js学习笔记（二）--Composites.stack()分析

最新推荐文章于 2024-08-10 07:29:55 发布

chenqiong1991

最新推荐文章于 2024-08-10 07:29:55 发布

阅读量3.9k

点赞数 3

分类专栏：学习笔记 matter.js 文章标签： matter-js

本文链接：https://blog.csdn.net/chenqiong1991/article/details/77926446

版权

学习笔记同时被 2 个专栏收录

45 篇文章

订阅专栏

matter.js

13 篇文章

订阅专栏

本文是关于matter-js库中Composites.stack()函数的学习笔记，详细解析了该函数的用法，包括参数解释、实例生成（矩形和圆形物体堆）及完整代码展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

Composites.stack()可以用来创建物体堆。在此分析其具体用法。

函数分析

1.先上源码

Composites.stack = function(xx, yy, columns, rows, columnGap, rowGap, callback) {
        var stack = Composite.create({ label: 'Stack' }),
            x = xx,
            y = yy,
            lastBody,
            i = 0;

        for (var row = 0; row < rows; row++) {
            var maxHeight = 0;

            for (var column = 0; column < columns; column++) {
                var body = callback(x, y, column, row, lastBody, i);

                if (body) {
                    var bodyHeight = body.bounds.max.y - body.bounds.min.y,
                        bodyWidth = body.bounds.max.x - body.bounds.min.x; 

                    if (bodyHeight > maxHeight)
                        maxHeight = bodyHeight;

                    Body.translate(body, { x: bodyWidth * 0.5, y: bodyHeight * 0.5 });

                    x = body.bounds.max.x + columnGap;

                    Composite.addBody(stack, body);

                    lastBody = body;
                    i += 1;
                } else {
                    x += columnGap;
                }
            }

            y += maxHeight + rowGap;
            x = xx;
        }

        return stack;
    };

参数xx,yy分别为物体堆中第一个物体的x和y坐标，columns和 rows分别为所要创建的物体堆的列数和行数，columnGap和rowGap分别为物体与物体之间的列间隙和行间隙，最后，由var body = callback(x, y, column, row, lastBody, i); 可以看出callback为生成的具体物体的方法。
当然，前提要声明Composites ：Composites=Matter.Composites

2.生成堆实例。

var stack=Composites.stack(250,100,6,3,0,0,function (x,y) {
        return Bodies.rectangle(x,y,80,20);
    });

这里，生成的是，第一个物体在位置（250，100），共6列，3行，每个物体为长80，宽20的矩形所够成的物体堆。

3.生成每个物体为圆的堆

var stack_circle=Composites.stack(380,100,7,5,0,0,function (x,y) {
        return Bodies.circle(x,y,20);
    });

如图，世界里有圆形物体构成的堆和矩形物体构成的堆。

4.代码全文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="../build/matter.js"></script>
</head>
<body>
<script>
    var Engine=Matter.Engine,
        Render=Matter.Render,
        World=Matter.World,
        Composites=Matter.Composites,
        Bodies=Matter.Bodies;

    var engine=Engine.create(),
        world=engine.world;

    var render=Render.create({
        engine:engine,
        element:document.body

    });

    Render.run(render);
    Engine.run(engine);

    var stack=Composites.stack(250,100,6,3,0,0,function (x,y) {
        return Bodies.rectangle(x,y,80,20);
    });

    var ground=Bodies.rectangle(500,600,1000,100,{isStatic:true});

    World.add(world,[stack,ground]);
</script>
</body>
</html>