Matter-JS Composite.add 符合材料新增約束
阿新 • • 發佈：2019-01-06
目錄
Composite
1、Matter.Composite 模組包含建立符合體的方法
2、Composite 複合體是 Matter.Body 剛體、Matter.Constraint 約束以及 Matter.Composite 複合體的集合。
3、比如一個矩形(剛體)、一個圓形(剛體)、通過約束即可合成一個複合體，同時複合體與複合體又可以組成更復雜的複合體。
The
Matter.Compositemodule contains methods for creating and manipulating composite bodies. A composite body is a collection ofMatter.Body,Matter.Constraintand otherMatter.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 theMatter.Worldobject is also a type ofMatter.Compositeand as such all composite methods here can also operate on aMatter.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.