3

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);

  }
4

3 回答 3

6

我采用了与以下非常相似的解决方案：

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%。

于 2019-04-18T14:56:31.863 回答
5

const { min, max } = part.bounds

它将包含您需要的内容{ x, y }

只需减去max.x - min.x&max.y - min.y

于 2018-07-15T14:35:19.157 回答
1

我找到了两种解决方案。

1- 创建一个类来包装 matter.js 主体，它也将保持高度和宽度。IE：

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] 高度。这也将解释任何轮换。此链接清楚地解释了它，对于 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 作为参数并返回距离（与上面的函数基本相同）：

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

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

于 2020-10-17T02:04:16.813 回答