constraint 约束

1、多个物体可以使用一根有弹性的绳子连接起来，这个绳子就相当于 constraint (约束），被约束的多个刚体连接在一起之后，移动就相互受到了牵制。

2、Matter.Constraint 模块包含了用于创建和处理约束的方法，如约束的长度、约束的强度等。

3、官网 API：http://brm.io/matter-js/docs/classes/Constraint.html

4、Matter.Constraint.create(options)→ Constraint 用于创建约束，具体使用在代码的注释中已经详细说明。

<!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地址--><script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script><script type="text/javascript">var stageWidth = 800;//舞台宽度var stageHeight = 500;//舞台高度window.onload = function () {var Engine = Matter.Engine;//引擎var Render = Matter.Render;//渲染器var World = Matter.World;//世界var Constraint = Matter.Constraint;//约束var MouseConstraint = Matter.MouseConstraint;//鼠标控制var Composites = Matter.Composites;//复合材料var Bodies = Matter.Bodies;//物体var engine = Engine.create();//创建引擎var render = Render.create({//创建渲染器engine: engine,//渲染创建好的引擎element: document.body,//渲染页面的body元素options: {width: stageWidth,height: stageHeight,wireframes: false,//是否显示边线框(显示边线方便调试)showVelocity: true//是否显示速度}});Engine.run(engine);//运行引擎Render.run(render);//运行渲染器var crossArr = createCross(Bodies);/*** Constraint.create()：创建约束，其参数是一个json对象,主要参数有：bodyA,pointA,bodyB,pointB,length,stiffness等* 本例中：bodyA 和 bodyB 分别为跷跷板横竖两个矩形；* pointA 和 pointB 表示约束点的位置，其值为向量，默认为0，在物体中心位置。以物体中心为原点进行量相减(三角形法则)* 为两个向量,默认为0向量,即物体的约束点默认在物体中心位置，否则，物体的对应的约束点为中心位置加上所赋的向量值。* crossArr[0]是跷跷板竖杆，高150，以中心为起点，y方向-75,则约束点刚好在矩形顶点中间位置* crossArr[1]是跷跷板横杆，为设置 pointB 时，其约束点默认在物体中心{x:0,y:0}*/var rotate = Constraint.create({bodyA: crossArr[0],pointA: {x: 0, y: -75},bodyB: crossArr[1],length: 0,//约束点的长度stiffness: 0.9//刚度值(0,1]，值越大，物体刚度越强，越不容易拉伸});/**创建一个堆叠混合体——堆叠矩形,3行4列* stack(xx, yy, columns, rows, columnGap, rowGap, callback)*/var stack_rect = Composites.stack(stageWidth / 4, 20, 4, 3, 0, 0, function (x, y) {return Bodies.rectangle(x, y, 100, 40);//堆叠的每个矩形宽100,高40});/**添加鼠标控制*/var mouseConstraint = MouseConstraint.create(engine, {element: document.body});World.add(engine.world, crossArr);//添加十字架刚体World.add(engine.world, [stack_rect, mouseConstraint, rotate]);//添加复合体和鼠标控制以及约束World.add(engine.world, create4Wall(Bodies));//添加4面墙到世界中}/*** 创建一个跷跷板(横竖两个矩形组成)*/function createCross(Bodies) {/**竖杆(矩形),这里有两个属性需要注意* render:{visible:true,opacity:1,sprite:{xScale:1,yScale:1,xOffset:0,yOffset:0},lineWidth:0}* collisionFilter:{category:0x0001,mask:0xFFFFFFFF,group:0}：碰撞过滤器* group相等的物体，当group>0时，则它们始终会碰撞* group相等的物体，当group<0时，则它们始终不碰撞*/var rectA = Bodies.rectangle(stageWidth / 2, stageHeight - 75, 40, 150, {isStatic: true,//静止竖杆运动render: {fillStyle: "#0ff"//设置物体背景颜色},collisionFilter: {group: -1//十字架的横杆与竖杆设置为始终不会碰撞,两者的group相等且小于0}});var rectB = Bodies.rectangle(stageWidth / 2, 350, 500, 40, {//创建十字架横杆(矩形)render: {fillStyle: "#f00"},collisionFilter: {group: -1}});return [rectA, rectB];}/***创建4面墙-强制物体在墙内运动*/function create4Wall(Bodies) {var ground_top = Bodies.rectangle(stageWidth / 2, 0, stageWidth, 40, {isStatic: true});var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true});var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight, stageWidth, 40, {isStatic: true});var ground_left = Bodies.rectangle(0, stageHeight / 2, 40, stageHeight, {isStatic: true});return [ground_top, ground_right, ground_bottom, ground_left];}</script>
</head>
<body>
</body>
</html>

1、两个刚体(矩形)通过约束组合成一个混合体(跷跷板)，可以看到中间约束点的绳子，stiffness(刚度)越大，物体越不容易拉伸。

2、掉下来的属于符合材料，可以参考《Matter-JS Composites 混合材料详解》中的 "stack 堆叠" 部分。

3、Matter.Constraint 约束将会是很常见的操作，也可以参考《Matter-JS Composites 混合材料 · 上》中的 "chain 链" 部分。

Constraint.create

1、Constraint.create()：创建约束，其参数是一个 json 对象, 主要参数有：bodyA,pointA,bodyB,pointB,length,stiffness 等。

2、bodyA 和 bodyB 分别为被约束的两个物体。

3、pointA 和 pointB 分别表示 bodyA、bodyB 的约束点位置。pointA、pointB 的值为向量，默认为 {x:0,Y:)}，在物体的中心位置。以物体中心为原点进行向量相减(三角形法则)

4、Constraint.create() 函数源码地址：http://brm.io/matter-js/docs/files/src_constraint_Constraint.js.html#l28

现在来实现上图效果：

1、3个锁链，左边为矩形堆叠组成，中间为圆形堆叠组成，右边为圆角矩形堆叠组成。

2、每条锁链中的物体相互应该不发生碰撞，则设置 collisionFilter: {group: group} group 为负数且相等即可。

3、锁链与锁链相互发生碰撞，则 group 不相等即可。

4、每条锁链顶部不是单纯的设置 {isStatic: true} 进行固定，而是使用 Constraint.create 创建约束而成，因为顶部可以看到约束的绳子。

亲测Matter.js 的0.14.2版本效果如上，老版本可能会有区别，实现代码如下：

<!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地址--><!--<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,//是否显示角度,默认falseshowVelocity: true,//是否显示速度,默认falseshowCollisions: true,//是否显示碰撞点,默认false}});Engine.run(engine);//运行引擎Render.run(render);//运行渲染器/**设置鼠标控制*/var mouseConstraint = MouseConstraint.create(engine, {});/**---------第------1-------条-------链（矩形）*//**Body.nextGroup(isNonColliding)：下一个组ip值，* isNonColliding：表示非碰撞，为true时，第一次调用 nextGroup 时返回 -1，每调用一次则递减1* isNonColliding=false时，第一次调用 nextGroup 时返回 1，每调用一次则递加1*/var group = Body.nextGroup(true);/**参加竖向的堆叠材料*/var stack_1 = Composites.stack(stageWidth / 4, 40, 1, 9, 0, 0, function (x, y) {/**使用矩形组成链条，链条中所有物体属于同一个group，且为负数，这样相互就不会发生碰撞*/return Bodies.rectangle(x, y, 20, 40, {collisionFilter: {group: group}});});/**使用复合材料链将堆叠体链接起来* 注意：堆叠体只是将多个物体堆叠在一起，但是相互仍然是隔离的，相互没有约束的* 而chain链是进行constraint（约束）的，所以链条是一个有约束的整体* stiffness：设置链条的刚度，相当于设置链条的弹性；length：链条的长度*/Composites.chain(stack_1, 0, 0.5, 0, -0.5, {stiffness: 0.7, length: 2});/**将锁链固定在舞台上：* 思路一是将链条上的第一个物体设置 {isStatic: true} 属性即可固定住整个链条* 思路二是将第一个物体创建约束Constraint.create。这里对3个物体都是要这种方式，从而抽取出公共方法* */var fixed_1 = constraintChain(stack_1);/**为链条上的每个物体设置一个初始偏移值，这样一开始就会动起来*/for (var i = 0; i < stack_1.bodies.length; i++) {Body.translate(stack_1.bodies[i], {x: -i * 20, y: -50});}/**---------第------2-------条-------链（圆形）*//**true表示非碰撞体，链条内部不碰撞，但是链条与链条应该发生碰撞，所以重新取值*/group = Body.nextGroup(true);var stack_2 = Composites.stack(stageWidth / 2, 40, 1, 9, 0, 0, function (x, y) {return Bodies.circle(x, y, 20, {collisionFilter: {group: group}});});Composites.chain(stack_2, 0, 0.5, 0, -0.5, {stiffness: 0.9, length: 2});var fixed_2 = constraintChain(stack_2);for (var i = 0; i < stack_2.bodies.length; i++) {Body.translate(stack_2.bodies[i], {x: -i * 20, y: -80});}/**---------第------3-------条-------链（圆角矩形）*/group = Body.nextGroup(true);var stack_3 = Composites.stack(stageWidth * (3 / 4), 30, 1, 9, 0, 0, function (x, y) {return Bodies.rectangle(x, y, 20, 60, {collisionFilter: {group: group}, chamfer: 10});});/**length=0时，只能看到约束的点，却看不到约束的绳子*/Composites.chain(stack_3, 0, 0.3, 0, -0.3, {stiffness: 0.9, length: 0});var fixed_3 = constraintChain(stack_3);/**将物体以及鼠标控制添加到世界中*/World.add(engine.world, [mouseConstraint, stack_1, stack_2, stack_3]);/**将链条的约束添加到世界中*/World.add(engine.world, [fixed_1, fixed_2, fixed_3]);/**为世界4周添加4面墙*/World.add(engine.world, create4Wall(Bodies));}/**为链条添加约束*/function constraintChain(stack) {/**将stack（链条）约束(固定)在 pointA的位置*/var fixed = Constraint.create({/**stack.bodies返回的Body数组，.position返回物体当前位置的向量Vector，Default: { x: 0, y: 0 }*/pointA: {x: stack.bodies[0].position.x, y: stack.bodies[0].position.y - 30},bodyB: stack.bodies[0],pointB: {x: 0, y: -20},length: 20,//约束点的长度stiffness: 0.3//刚度值( 0,1]，值越大，物体刚度越强，越不容易拉伸});return fixed;}/**创建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>

Matter-JS constraint 约束相关推荐

【一统江湖的大前端（8）】matter.js 经典物理
[一统江湖的大前端(8)]matter.js 经典物理我的github主页:https://github.com/dashnowords 我的新书上架啦,3天即登京东计算机编程语言类排行榜Top1! ...
【华为云技术分享】【一统江湖的大前端（8）】matter.js 经典物理
[摘要] 介绍前端物理引擎matterjs基本使用及实战示例代码托管在:http://www.github.com/dashnowords/blogs 在前端开发领域,物理引擎是一个相对小众的话题 ...
物理世界的互动之旅：Matter.js入门指南
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群本文简介戴尬猴,我是德育处主任欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
android 小鸡走动动画,使用Matter.js实现的小鸡掉落动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var chickenContainer = document.getElementById('chicke ...
matter.js文档翻译
学习layabox的时候,发现matter.js的资料比较少,所以配合机器翻译,勉强凑个matter.js的中文文档,以供查询 API文档matter.js0.13.0 2D刚体物理引擎为Web编写的 ...
grav html5,HTML5 Matter.js 重力试验场
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 // Matter.js module aliases var Engine = Matter.Engine ...
使用 Phaser3+Matter.js 实现“合成大西瓜”游戏
前言最近有一款"合成大西瓜"的小游戏有点火,试玩了一下,玩法比较简单,实现难度也不大,所以参照游戏原型自己实现了一下,游戏开发主要使用了 Phaser 游戏框架,本文主要分享游戏 ...
SQL中的CONSTRAINT(约束)用法
主要就是增加数据约束的. ORACLE支持五种类型的完整性约束 NOT NULL (非空)–防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值. CHEC ...
SQL中的CONSTRAINT(约束)用法总结
主要就是增加数据约束的. Oracle中的约束简单介绍约束 Including Constraints 在数据库中使用约束(constraints)是为了在该数据库中实施所谓的"业务规 ...
html双人台球游戏,使用h5和matter.js实现的简化版台球小游戏
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 // necessary modules const { Engine, Render, World, Bo ...

Matter-JS constraint 约束

constraint 约束

Constraint.create

Matter-JS constraint 约束相关推荐

最新文章

热门文章