matter.js创建一个旋转平台

时间:2015-07-14 13:13:37

标签: javascript jquery html

我需要创建一个可以用鼠标旋转的平台。我尝试创建一个矩形并将其连接到Matter.Constraint.create()的点,但是这样的平台无法用鼠标旋转。我还没有在演示或示例中找到替代方案

这是我使用的代码:

(function(){
    // Matter.js module aliases
    var Engine = Matter.Engine;
        World = Matter.World;
        Render = Matter.Render;
        Bodies = Matter.Bodies;
        Composites = Matter.Composites;
        Constraint = Matter.Constraint;
        MouseConstraint = Matter.MouseConstraint;

    // create a Matter.js engine
    var _engine = Engine.create(document.body);

    var rotatingPlatform = Bodies.rectangle(100, 200, 200, 30);

    World.add(_engine.world, [
    MouseConstraint.create(_engine),
    rotatingPlatform,
    Constraint.create({ pointA: {x: 100, y: 200}, bodyB: rotatingPlatform}),
    ]);

    // run the engine
    Engine.run(_engine);
})();

标记:

<!doctype html>
<html>
<head></head>
<body>
    <script src="matter-0.8.0.js"></script>
    <script src="myJsFile.js"></script>
</body>
</html>

如何使用鼠标旋转此平台?

2 个答案:

答案 0 :(得分:2)

这个问题有点陈旧,但没有人回答过。

将此内容添加到脚本底部适用于我:

Matter.Events.on(_engine, "mousemove",  function(event) {
    if (Matter.Bounds.contains(rotatingPlatform.bounds, event.mouse.position) && event.mouse.button == 0) {
        targetAngle = Matter.Vector.angle(rotatingPlatform.position, event.mouse.position);
        Matter.Body.rotate(rotatingPlatform, targetAngle - rotatingPlatform.angle);
    }
});
_engine.world.gravity.y = 0;

答案 1 :(得分:0)

我喜欢这个主意,@ oxdeadbeef,奇怪的是我的鼠标移动活动从未被解雇过。我最终做到了这一点,这有效:

public class classIWantToTest implements classIWantToTestFacade{
        @Autowired
        private SomeService myService;

        @Override
        public Optional<OutputData> getInformations(final InputData inputData) {
            final Optional<OutputData> data = myService.getListWithData(inputData);
            if (data.isPresent()) {
                final List<ItemData> allData = data.get().getItemDatas();
                    //do something with the data and allData
                return data;
            }

            return Optional.absent();
        }   
}

再次感谢您的想法。