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

来源：互联网发布：苹果越狱会清除数据吗编辑：程序博客网时间：2024/05/21 21:41

写在前面

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>

写在后面

后面将分析给世界添加鼠标控制。

阅读全文

1 0