您的位置：首页 > Web前端 > JavaScript

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

2017-09-10 22:51 423 查看

写在前面

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>

写在后面

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航