Matter-JS Render.create 渲染器创建

喜欢ヅ旅行 2022-04-10 11:29 192阅读 0赞

# Render.create #

1、create 方法用于创建新的渲染器。option 参数是一个对象，用于指定要覆盖的默认属性值。所有属性都有默认值，许多属性值都是根据其他属性自动预先计算而得到。

2、[Matter.Render.create(\[options\]) ][Matter.Render.create_options] 函数源码如下。

/**
     * Creates a new renderer. The options parameter is an object that specifies any properties you wish to override the defaults.
     * All properties have default values, and many are pre-calculated automatically based on other properties.
     * See the properties section below for detailed information on what you can pass via the `options` object.
     * @method create
     * @param {object} [options]
     * @return {render} A new renderer
     */
    Render.create = function(options) {
        var defaults = {
            controller: Render,
            engine: null,
            element: null,
            canvas: null,
            mouse: null,
            frameRequestId: null,
            options: {
                width: 800,
                height: 600,
                pixelRatio: 1,
                background: '#18181d',
                wireframeBackground: '#0f0f13',
                hasBounds: !!options.bounds,
                enabled: true,
                wireframes: true,
                showSleeping: true,
                showDebug: false,
                showBroadphase: false,
                showBounds: false,
                showVelocity: false,
                showCollisions: false,
                showSeparations: false,
                showAxes: false,
                showPositions: false,
                showAngleIndicator: false,
                showIds: false,
                showShadows: false,
                showVertexNumbers: false,
                showConvexHulls: false,
                showInternalEdges: false,
                showMousePosition: false
            }
        };

## options ##

<!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>
        
        <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 MouseConstraint = Matter.MouseConstraint;//鼠标控制
                var Bodies = Matter.Bodies;//物体
                var Composites = Matter.Composites;//符合材料
                var Composite = Matter.Composite;//混合体
                var Common = Matter.Common;//公用模块
    
                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,//是否显示角度,默认false
                        showVelocity: true,//是否显示速度,默认false
                        showCollisions: true,//是否显示碰撞点,默认false
                        showBroadphase: true,//是否显示宽频，用于调试,默认false
                        showMousePosition: false // 鼠标约束线
                    }
                });
                Engine.run(engine);//运行引擎
                Render.run(render);//运行渲染器
                /**设置鼠标控制*/
                var mouseConstraint = MouseConstraint.create(engine, {});
                var stack = Composites.stack(20, 20, 12, 4, 0, 0, function (x, y) {
                    switch (Math.round(Common.random(0, 1, 2))) {
                    /**为0时创建矩形*/
                        case 0:
                            return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50));
                    /**为1时创建多边形*/
                        case 1:
                            return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50));
                    /**为2时创建圆形*/
                        case 2:
                            return Bodies.circle(x, y, Common.random(5, 20));
                    }
                });
                /**将物体形以及鼠标控制添加到世界中*/
                World.add(engine.world, [mouseConstraint, stack]);
                World.add(engine.world, create4Wall(Bodies));//为世界4周添加4面墙
            }
            /**创建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>

![20190104140934716.gif][]

当渲染的是body的元素时，则matter-js自动就是在body元素下生成画布进行绘制。

[Matter.Render.create_options]: http://brm.io/matter-js/docs/classes/Render.html#method_create
[20190104140934716.gif]: /images/20220331/e08ca8cdb2eb42dc92ff6ec5b107de03.png