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

程序员文章站 2024-03-04 08:28:17

...

写在前面

matter.js QQ交流群：796728825
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).height(),
           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>

效果

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

写在前面

1. 先上源码

2.用法

3.ps

4.设置世界全屏

5.代码全文

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

php学习笔记（三）操作符与控制结构_php入门_脚本之家

CodeIgniter学习笔记三：扩展CI的控制器、模型，codeigniterci

Layabox 3D游戏开发学习笔记---射线检测，鼠标控制物体运动

oracle学习笔记（三） DCL 数据控制语言与 DDL 数据定义语言

php学习笔记（三）操作符与控制结构

Golang学习笔记（三）：控制流

Layabox 3D游戏开发学习笔记---射线检测，鼠标控制物体运动

php学习笔记（三）操作符与控制结构

oracle学习笔记（三） DCL 数据控制语言与 DDL 数据定义语言