Как мне разместить объект, используя Matter.Object.create в деле.js?

Question

Как мне разместить объект, используя Matter.Object.create в деле.js?

Я использую вещество.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? Я пытался это сделать, но все объекты немного сместились, вероятно, из-за моего непонимания.

Обновление / уточнение: Моя цель состоит в том, чтобы вершины созданного объекта заканчивали в точности на координатах, которые они имеют в исходных данных.

2

javascript matterjs

Источник

user185596 05 июн '15 в 21:10

1 ответ

Решение

Другие вопросы по тегам javascript matterjs

user3280896 06 июн '15 в 12:27 2015-06-06 12:27 · Accepted Answer · 2015-06-06 12:27

При создании тела вершины переориентируются относительно их центра масс, а затем переводятся в заданный 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
});