matter.js学习笔记（四）--Constraint.create()制造跷跷板
写在前面
matter.js QQ交流群：796728825
constraint意为约束。制造跷跷板有两个关键点，一是设置两块板子不能互相碰撞，二是一个板子要固定，另外一个要可以自由活动，并且中心点固定。
Constraint.create()需要的参数主要有：bodyA,pointA,bodyB,pointB,length,stiffness.
在跷跷板案例中，bodyA和bodyB分别为两个板子，pointA和pointB为两个向量，如果不赋值，则默认为0向量，物体的约束点默认在中心位置，否则，物体的对应的约束点为中心位置加上所赋的向量值。
在此案例中，将生成一个红色的固定板子和一个蓝色的活动板子。
为了设置两块板子呈分离状态，即不能互相碰撞，需要设置collisionFilter:{ group:-1 } 字面上理解为碰撞过滤器，它可以设置哪些物体可以互相碰撞，哪些不能互相碰撞，两个物体的collisionFilter属性的group属性都设为-1，则这两个物体不会发生碰撞。
1.引入Constraint。
Constraint=Matter.Constraint2.在对应位置生成两个板子。
var rectA=Bodies.rectangle(666,$(window).height()-100,40,200,{
isStatic:true, //静止
render:{
fillStyle:"#f00" //设为红色
},
collisionFilter:{
group:-1
}
});
var rectB=Bodies.rectangle(666,$(window).height()-180,400,40,{
render:{
fillStyle:"#00f" //设为蓝色
},
collisionFilter:{
group:-1
}
});3.创建旋转约束。
var rotate=Constraint.create({
bodyA:rectA,
pointA:{x:0,y:-80},
bodyB:rectB,
length:0,
stiffness:0.9
});物体rectA 的约束点设置在其中心位置向上平移80的位置，此位置也是物体rectB的中心位置，pointB未设置，默认为{x:0，y:0}。
4.创建的物体和旋转约束加入到世界中。
World.add(world,[rectA,rectB,ground,stack_rect,stack_circle,mouseConstraint,rotate]);5.代码全文及最终效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testtitle>
<script src="../build/matter.js">script>
<script src="../demo/lib/jquery-1.11.0.min.js">script>
<style>
body{
margin:0;
overflow: hidden;
}
style>
head>
<body>
<script>
var Engine=Matter.Engine,
Render=Matter.Render,
World=Matter.World,
Vector=Matter.Vector,
Constraint=Matter.Constraint,
MouseConstraint=Matter.MouseConstraint,
Composites=Matter.Composites,
Bodies=Matter.Bodies;
var engine=Engine.create(),
world=engine.world;
var render=Render.create({
engine:engine,
element:document.body,
options:{
width:$(window).width(),
height:$(window).width(),
wireframes:false
}
});
Engine.run(engine);
Render.run(render);
var rectA=Bodies.rectangle(666,$(window).height()-100,40,200,{
isStatic:true,
render:{
fillStyle:"#f00"
},
collisionFilter:{
group:-1
}
});
var rectB=Bodies.rectangle(666,$(window).height()-180,400,40,{
render:{
fillStyle:"#00f"
},
collisionFilter:{
group:-1
}
});
var rotate=Constraint.create({
bodyA:rectA,
pointA:{x:0,y:-80},
bodyB:rectB,
length:0,
stiffness:0.9
});
var ground=Bodies.rectangle($(window).width()/2,$(window).height()-10,$(window).width(),20,{
isStatic:true,
render:{
fillStyle:"#9fa"
}
});
var stack_rect=Composites.stack(300,100,4,3,0,0,function(x,y){
return Bodies.rectangle(x,y,150,40);
});
var stack_circle=Composites.stack(1200,100,1,5,2,3,function (x,y) {
return Bodies.circle(x,y,30);
});
var mouseConstraint=MouseConstraint.create(engine,{
element:document.body
});
World.add(world,[rectA,rectB,ground,stack_rect,stack_circle,mouseConstraint,rotate]);
script>
body>
html>