Matter-js - Как получить ширину и высоту прямоугольника?

Question

Matter-js - Как получить ширину и высоту прямоугольника?

Мне нужно знать, есть ли метод возврата расстояния, реализованный в Matter-js .

// part.vertices[0] and part.vertices[1]

Я хочу интегрировать вариант плитки. Вот как выглядит критическая часть (я использую функцию переопределения для Render.bodies, это больше всего интересует меня) .

  for (let x = 0; x < this.tiles; x++) {

    c.drawImage(
      texture,
      texture.width * -part.render.sprite.xOffset * part.render.sprite.xScale,
      texture.height * -part.render.sprite.yOffset * part.render.sprite.yScale,
      texture.width * part.render.sprite.xScale,
      texture.height * part.render.sprite.yScale);

  }

Answer 1

const { min, max } = part.bounds

он будет содержать то, что вам нужно в { x, y }

просто вычесть max.x - min.x & max.y - min.y

Answer 2

Я пошел с решением, очень похожим на следующее:

var width = 30;
var height = 30;
var rect = Bodies.rectangle(150, 100, width, height, {density:0.01, className:"brick", width:width, height:height});

console.log(rect.className, rect.width); // "brick", 30

Я решил сохранить исходную информацию о ширине / высоте вместе с другими пользовательскими свойствами, такими как className

Причина в том, что bounds На это влияет вращение любого не идеально круглого объекта, например. границы повернутого прямоугольника могут быть на ~30% шире, чем его фактическая ширина.

Answer 3

Я нашел два решения.

1- Создайте класс для обертывания тела question.js, который также будет удерживать высоту и ширину. то есть:

class rectWrapper {
  constructor(x, y, width, height, options){
    this.width = width
    this.height = height
    this.body = Matter.Bodies.rectangle(x, y, width, height, options)
    }
}

2- Другой способ - использовать магию математики для определения расстояния между двумя координатными точками, используя Body.vertices[0] и Body.vertices[1] для ширины, а также Body.vertices[0] и Body.vertices[3] для высоты. Это также будет учитывать любую ротацию. Эта ссылка четко объясняет это для двух и трех измерений:

https://sciencing.com/calculate-distance-between-two-coordinates-6390158.html

Я бы порекомендовал написать для этого свою собственную "служебную функцию". Тяжелый пример может выглядеть так:

function distance(x1, y1, x2, y2){
  var x = Math.abs(x1-x2)
  var y = Math.abs(y1-y2)
  return Math.sqrt((x*x)+(y*y))
}

Итак, звонок может выглядеть так:

var rect = Matter.Bodies.rectangle(0,0,10,50)

var width = distance(rect.vertices[0].x, rect.verticies[0].y, rect.vertices[1].x, rect.vertices[1].y)

var height = distance(rect.vertices[0].x, rect.vertices[0].y, rect.vertices[3].x, rect.vertices[3].y)

В качестве альтернативы, если вы используете p5.js в качестве средства визуализации, вы можете использовать p5.dist(), который принимает x1, y1, x2, y2 в качестве аргументов и возвращает расстояние (в основном такое же, как функция выше):

https://p5js.org/reference/#/p5/dist

Обратите внимание, это будет работать только для прямоугольников. Если вы используете разные виды геометрии, я бы, наверное, сам сделал бы класс-оболочку.