Question

我使用matter.js并且我有绝对位置（来自SVG文件）的对象的顶点数据。当我尝试将它们放在地图上时，它们最终定位在0,0 附近。使用此代码段可以轻松观察到这一点：

<body>
    <script src="matter-0.8.0.js"></script>

    <script>
     var engine = Matter.Engine.create(document.body);
     var object = Matter.Body.create( 
         { 
             vertices: [ { x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 } ],
             isStatic: true
         });

     Matter.World.add(engine.world, [object]);
     Matter.Engine.run(engine);
    </script>
</body>

或者只看这个jsfiddle：https://jsfiddle.net/vr213z4u/

这个定位如何工作？我是否需要将绝对位置数据标准化为相对位置并使用发送到Matter.Object.create的选项的position属性？我试过了，但所有物品都有点流离失所，可能是因为我缺乏理解。

更新/澄清： 我的目标是创建的对象的顶点完全位于它们在源数据中的坐标上。

Answer 1

在身体创建时，顶点围绕其质心重新定向，然后转换为给定的body.position。由于您未在此处传递位置向量，因此默认为（0,0）。

尝试这样的事情：

var body = Matter.Body.create({
    position: { x: 500, y: 500 },
    vertices: [{ x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 }],
    isStatic: true
});

如果您希望该职位是绝对的：

var vertices = [{ x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 }];

var body = Matter.Body.create({
    position: Matter.Vertices.centre(vertices),
    vertices: vertices,
    isStatic: true
});

我应该如何在matter.js中使用Matter.Object.create放置一个对象？

1 个答案: