我正在使用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属性?我尝试过,但是所有物体都有一点位移,可能是由于我缺乏理解。

更新/说明:
我的目标是使创建的对象的顶点精确地位于源数据中的坐标上。

最佳答案

在创建实体时,将顶点围绕其重心重新定向,然后平移到给定的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
});

关于javascript - 我应该如何在Matter.js中使用Matter.Object.create放置对象?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30675883/

10-12 15:18