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

我使用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的选项的位置属性?我试过了，但是所有的物体都有点移位，可能是由于我缺乏理解。

更新/澄清:我的目标是创建的对象的顶点最终与源数据中的坐标完全一致。

在创建体时，顶点围绕其质心重新定向，然后转换为给定的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
});

相关内容

最新更新

热门标签：