Day19. 手牵手，我的朋友，物体永远在你左右 - Constraint

今天是弹珠台完成後的第一篇，我们依然会带大家看一些还没提到的模组，最後再来做一个小实作，实作题目先卖个小关子。
记得 Day17 我们提到的 mouseConstraint 吗，那时候简单带过的 constraint，今天我们先来把他补起来，让我们不再对他一知半解，能够更认识这个模组。

今天的Demo
今天的Demo原始码

今天会带大家看一下 Constraint 模组的 Create 方法原始码，也就是创建，里面会有各个属性与 default 值。

读者可以把 Constraint 想成像类似 Rigidbody 的一个物体，但他没有面积，他由一条线构成，也就是两个点或是用於制约两个物体的距离。

所以我们可以看到两对属性 : Body AB / Point AB，以及衍生的 length属性。

if (constraint.bodyA && !constraint.pointA)
    constraint.pointA = { x: 0, y: 0 };
if (constraint.bodyB && !constraint.pointB)
    constraint.pointB = { x: 0, y: 0 };

var initialPointA = constraint.bodyA ? Vector.add(constraint.bodyA.position, constraint.pointA) : constraint.pointA,
initialPointB = constraint.bodyB ? Vector.add(constraint.bodyB.position, constraint.pointB) : constraint.pointB,
length = Vector.magnitude(Vector.sub(initialPointA, initialPointB));

constraint.length = typeof constraint.length !== 'undefined' ? constraint.length : length;

当有物体且没有指定点的时候，会让点为 0,0。

另外当有 AB 两物体时，点会基於 AB 两物体的位置上再加上去。

当只给物体不给点的时候，会以物体的中心为点座标。

当没有输入长度的时候，而预设长度会由AB两点距离算出。

这个长度是可以设定的，这个长度会在最後力归零的时候确保指定的点与点间的距离为 0。

var render = {
    visible: true,
    lineWidth: 2,
    strokeStyle: '#ffffff',
    type: 'line',
    anchors: true
};

Render 的属性一样是拿来设定外观相关参数，可以注意到属性多跟线有关，如我们一开始说的一样，Constraint 就是指一条线，Render属性可以设定这条线的外观，如可不可见、粗度、填充方式。

anchors 是指线两端系上的两点要不要被渲染出来，渲染出来的话会是用一个点来呈现。

render这里的 type 会自动依赖其他的属性来决定，一般建议不要针对这个属性作设置，下面我们再来看 type 的属性。

这里有两个比较跟物理学相关的值。

damping : 1,
stiffness : 0.1,

stiffness 用於表示这条线的僵硬度，僵硬度影响具体一点是用来表示线的行为会更像弹簧还是更像一条直线。越靠近 0 表示越像弹簧，1的话表示完全僵硬的直线，预设为 1。

damping 是物理学上的一个数值，中文称作阻尼，简单的解释可以理解为使振动衰减的各种力，阻尼大，振动小，越大会让连接越贴近刚性连接，阻尼力也称为减震力，太高会起不到缓冲效果。

看了这两个参数，我们可以来看一下上面说的渲染时 type 的种类：

if (constraint.length === 0 && constraint.stiffness > 0.1) {
    render.type = 'pin';
    render.anchors = false;
} else if (constraint.stiffness < 0.9) {
    render.type = 'spring';
}

当线的长度 0，且刚性较大的时候，行为会贴近成一个钉子，所以将 Type 设为 pin，且把钉住的点的显示取消。

当僵硬度小於 0.9 的时候，因具有弹性表现，所以显示为弹簧的样式。

所以说 type 不建议手动设定，可以让他自动判断就好。

最後就是基本属性：

plugin : {},
label : "constraintA",

label 就是拿来存一些特定辨识用的标签，跟 body 一样。

plugin 是如果有透过一些 plugin 模组汇入插件，可以拿来存一些 plugin 用的属性。

上面介绍的就是 API 文件上此版本有提到关於 Constraint 的属性了，Constraint 可用於制作钉子固定物体，或是一条悬吊物体的线，也能成为弹起物体的弹簧，善用这些设置，可以让我们的世界更丰富，像以前物理课上过的牛顿摆也能做出来。

本来打算拆成上下两篇来讲属性跟方法，但笔者在准备的时候突然发现 ─ Constraint 只有一个方法！这边紧急加开一点篇幅补上，

Matter.Constraint.pointAWorld(constraint);
Matter.Constraint.pointBWorld(constraint);

这两个方法笔者是当作一个方法啦，他其实就是显示 constraint 中的点在世界座标的位置，如果你直接拿 constraint上的 pointA，拿到的会是相对座标，可以按按看最右边的按钮来了解当下直接点 property 跟用方法拿到的世界座标的差异。

那更新完後，Constraint 模组在此告一个段落！我们明天见！