2

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

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

4

1 回答 1

7

在实体创建时，顶点围绕它们的质心重新定向，然后转换为给定的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
});
于 2015-06-06T12:27:22.433 回答