matter.js学习笔记（三）--mouseConstraint鼠标控制

来源：互联网发布：图像软件有哪些编辑：程序博客网时间：2024/05/22 10:25

写在前面

mouseConstraint默认为世界里的物体添加鼠标约束。

1. 先上源码

       MouseConstraint.create = function(engine, options) {                                var mouse = (engine ? engine.mouse : null) || (options ? options.mouse : null);                                if (!mouse) {                                    if (engine && engine.render && engine.render.canvas) {                                        mouse = Mouse.create(engine.render.canvas);                                    } else if (options && options.element) {                                        mouse = Mouse.create(options.element);                                    } else {                                        mouse = Mouse.create();                                        Common.warn('MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected');                                    }                                }                                var constraint = Constraint.create({                                     label: 'Mouse Constraint',                                    pointA: mouse.position,                                    pointB: { x: 0, y: 0 },                                    length: 0.01,                                     stiffness: 0.1,                                    angularStiffness: 1,                                    render: {                                        strokeStyle: '#90EE90',                                        lineWidth: 3                                    }                                });                                var defaults = {                                    type: 'mouseConstraint',                                    mouse: mouse,                                    element: null,                                    body: null,                                    constraint: constraint,                                    collisionFilter: {                                        category: 0x0001,                                        mask: 0xFFFFFFFF,                                        group: 0                                    }                                };                                var mouseConstraint = Common.extend(defaults, options);                                Events.on(engine, 'beforeUpdate', function() {                                    var allBodies = Composite.allBodies(engine.world);                                    MouseConstraint.update(mouseConstraint, allBodies);                                    _triggerEvents(mouseConstraint);                                });                                return mouseConstraint;                            };

if (!mouse) { if (engine && engine.render && engine.render.canvas) { mouse = Mouse.create(engine.render.canvas); } else if (options && options.element) { mouse = Mouse.create(options.element); } else { mouse = Mouse.create(); Common.warn('MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected');
传入的参数中如果没有mouse，但是存在engine，并且engine.render和engine.render.canvas都存在，则会默认创建鼠标。最后，返回mouseConstraint 。

2.用法

只需引入Matter.MouseConstraint，并且生成鼠标控制实例
var mouseConstraint=MouseConstraint.create(engine,{}); ，再将它添加到世界中，

World.add(world,[rectA,ground,stack_rect,stack_circle,mouseConstraint]);

3.ps

为render的options添加wireframes:false可以为世界里的物品添加颜色，如果不对物品设置渲染颜色的话，引擎会默认物体颜色随机。如果要指定物体的颜色，可以在生成物体时设置render：render:{fillStyle:"#9fa"} 。

4.设置世界全屏

在生成render时，可以设置options选项，其中，有width和height属性，分别设置为$(window)的width()和height()即可。同时，要对body设置style：

body{   margin:0;   overflow: hidden;}

5.代码全文

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title>    <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,        Mouse=Matter.Mouse,        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(100,20,200,40,{        render:{            fillStyle:"#f0c"        }    });    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,5,5,2,3,function (x,y) {        return Bodies.circle(x,y,30);    });    var mouseConstraint=MouseConstraint.create(engine,{});    World.add(world,[rectA,ground,stack_rect,stack_circle,mouseConstraint]);</script></body></html>

效果

阅读全文

2 0