[]物理引擎显示旋转问题

matter官网的例子是这样的， http://brm.io/matter-js/demo/#chains

 
复制到Laya就变成这样了


 
LayaUISample.js代码：
 

(function () {
    var Sprite = Laya.Sprite;
    var Stage = Laya.Stage;
    var Browser = Laya.Browser;
    var WebGL = Laya.WebGL;
    var Render = Laya.Render;
    var Matter = Browser.window.Matter;
    var LayaRender = Browser.window.LayaRender;
    
    var Common = Matter.Common;
    var Composite = Matter.Composite;
    var Composites = Matter.Composites;
    var Bounds = Matter.Bounds;
    var Events = Matter.Events;
    var Grid = Matter.Grid;
    var Vector = Matter.Vector;
    var Body = Matter.Body;
    var Bodies = Matter.Bodies;
    var World = Matter.World;
    var Constraint = Matter.Constraint;
    var Mouse = Matter.Mouse;
    var mouseConstraint;
    var engine;
    var world;
    (function () {
        // 不支持WebGL时自动切换至Canvas
        Laya.init(750, Laya.Browser.height, WebGL);
        Laya.stage.alignV = Stage.ALIGN_MIDDLE;
        Laya.stage.alignH = Stage.ALIGN_CENTER;
        Laya.stage.scaleMode = "fixedwidth";
        Laya.stage.bgColor = '#000';
        setup();
    })();
    function setup() {
        initMatter();
        initWorld();
        Laya.stage.on("resize", this, onResize);
    }
    function initMatter() {
        var gameWorld = new Sprite();
        Laya.stage.addChild(gameWorld);
        // 初始化物理引擎
        engine = Matter.Engine.create({
            enableSleeping: true
        });
        Matter.Engine.run(engine);
        var render = LayaRender.create({
            engine: engine,
            // container: gameWorld,
            width: Laya.stage.stageWidth,
            height: Laya.stage.stageHeight,
            options: {
                wireframes: true,
                // wireframeBackground: '#00ff00', //当wireframes为true的时候，wireframeBackground可以设置背景颜色
                showAngleIndicator: true, //角度指示器
                width: 750,
                height: document.body.scrollHeight * window.devicePixelRatio,
                // background: '#00b6e4' //传入16进制颜色，或者图片路径，如 http://www.manfredhu.com/images/matterjs.png
            }
        });
        LayaRender.run(render);
        mouseConstraint = Matter.MouseConstraint.create(engine,
            {
                element: Render.canvas
            });
        Matter.World.add(engine.world, mouseConstraint);
        world = engine.world;
        render.mouse = mouseConstraint.mouse;
    }
    function initWorld() {
        // add bodies
        var group = Body.nextGroup(true);
            
        var ropeA = Composites.stack(100, 50, 8, 1, 10, 10, function(x, y) {
            return Bodies.rectangle(x, y, 50, 20, { collisionFilter: { group: group } });
        });
        
        Composites.chain(ropeA, 0.5, 0, -0.5, 0, { stiffness: 0.8, length: 2, render: { type: 'line' } });
        Composite.add(ropeA, Constraint.create({
            bodyB: ropeA.bodies[0],
            pointB: { x: -25, y: 0 },
            pointA: { x: ropeA.bodies[0].position.x, y: ropeA.bodies[0].position.y },
            stiffness: 0.5
        }));
        
        group = Body.nextGroup(true);
        
        var ropeB = Composites.stack(350, 50, 10, 1, 10, 10, function(x, y) {
            return Bodies.circle(x, y, 20, { collisionFilter: { group: group } });
        });
        
        Composites.chain(ropeB, 0.5, 0, -0.5, 0, { stiffness: 0.8, length: 2, render: { type: 'line' } });
        Composite.add(ropeB, Constraint.create({
            bodyB: ropeB.bodies[0],
            pointB: { x: -20, y: 0 },
            pointA: { x: ropeB.bodies[0].position.x, y: ropeB.bodies[0].position.y },
            stiffness: 0.5
        }));
        
        group = Body.nextGroup(true);
        var ropeC = Composites.stack(600, 50, 13, 1, 10, 10, function(x, y) {
            return Bodies.rectangle(x - 20, y, 50, 20, { collisionFilter: { group: group }, chamfer: 5 });
        });
        
        Composites.chain(ropeC, 0.3, 0, -0.3, 0, { stiffness: 1, length: 0 });
        Composite.add(ropeC, Constraint.create({
            bodyB: ropeC.bodies[0],
            pointB: { x: -20, y: 0 },
            pointA: { x: ropeC.bodies[0].position.x, y: ropeC.bodies[0].position.y },
            stiffness: 0.5
        }));
        
        World.add(world, [
            ropeA,
            ropeB,
            ropeC,
            Bodies.rectangle(400, 600, 1200, 50.5, { isStatic: true })
        ]);
        // add mouse control
        var mouse = Mouse.create(render.canvas),
            mouseConstraint = MouseConstraint.create(engine, {
                mouse: mouse,
                constraint: {
                    stiffness: 0.2,
                    render: {
                        visible: false
                    }
                }
            });
        World.add(world, mouseConstraint);
        // keep the mouse in sync with rendering
        render.mouse = mouse;
    }
    function onResize() {
        // 设置鼠标的坐标缩放
        Matter.Mouse.setScale(mouseConstraint.mouse, {
            x: 1 / (Laya.stage.clientScaleX * Laya.stage._canvasTransform.a),
            y: 1 / (Laya.stage.clientScaleY * Laya.stage._canvasTransform.d)
        });
    }
})();