javascript - Matter.js 创建一个旋转平台

标签 javascript html jquery matter.js

我需要创建一个可以用鼠标旋转的平台。我尝试创建一个矩形并将其连接到使用 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>

我该怎么做才能让这个平台随着鼠标旋转?

最佳答案

这个问题有点老了,但因为没有人回答。

将其添加到脚本底部对我有用:

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;

关于javascript - Matter.js 创建一个旋转平台,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31407683/

相关文章:

javascript - 在灯箱中的图像上添加热点链接

javascript - React Native - 为什么我的图像按钮在 Android 上闪烁?

javascript - 如何在JS中装饰querySelector/querySelectorAll

php - 使用 php 解析 javascript 文本

javascript - 表单输入 :Image onClick event doesn't redirect page. HTML 和 Javascript

html - 在垂直和水平居中绝对位置元素时设置最大宽度和高度

python - EmailMultiAlternatives 无法建立连接,因为目标机器主动拒绝它

Javascript正则表达式将所有字符匹配到内容内的某个点

javascript - 带有图像的水平下拉选择

javascript - 如何使用 JS/jQuery 检查两种颜色是否相同