Matter-js - 如何获取矩形的宽度和高度？

Question

我想知道在 Matter-js 中是否实现了距离 return 方法。

// 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

我决定携带原始 width/height 信息以及其他自定义属性，例如 className

原因是因为 bounds 受到任何非完美圆形物体旋转的影响，例如。旋转矩形的边界可能比实际宽度宽 ~30%。

Answer 3

我找到了两个解决方案。

1- 创建一个 class 来包裹 matter.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] 表示高度。这也将解释任何轮换。这个link解释的很清楚，对于2维和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 作为参数，returns距离（与上面的函数基本相同）：

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

请注意，这仅适用于矩形。如果您使用不同种类的几何图形，我可能会自己制作一个包装器 class。

Matter-js - 如何获取矩形的宽度和高度？

Matter-js - How to get width and height of rectangle?

matter.js