Question

我试图跟踪一个物体的位置，这样我就可以在p5.js中画一条痕迹。

我使用translate()和rotate()功能在屏幕上移动对象，为了画一条小道，我将在每个对象的位置后存储更新数组。我知道有一些类似于我在处理3 the model X, Y and Z functions时要求的东西，但据我所知，这些尚未在javascript版本中实现。

即使访问画布的当前变换矩阵也证明是有问题的，此时我考虑重新设计以省略api的变换部分，直到添加此功能。

所以我的问题基本上是：在应用一堆变换后，有没有办法确定（0,0）的屏幕（画布）坐标？

Answer 1

我在这里找到了解决这个问题的方法：

Answer 2

您应该在 push（）和 pop（）中进行所有转换，并将位置存储在自身内部，以便每个帧都将位置推入数组。

不，在一堆变换之后你不能得到（0,0）的画布坐标，因为translate将画布的原点（0,0）移动到一个新点，然后该点成为新的原点。

要绘制轨迹，可以将对象的位置矢量的历史存储在数组中。您可以在动画对象类的更新功能中实现它。为此，您可以存储 P5Vector（this.pos.x，this.pos.y）并在每次在绘制循环中调用函数时将其推入数组，然后您可以绘制一个圆或者通过这个数组循环遍历任何你想要的路径。

假设历史是一个包含动画对象的最后100个位置（矢量对象）的数组，在绘制循环中你可以：

for(var i=0; i<obj.history.length; i++)
{
  var loc = obj.history[i];
  ellipse(loc.x, loc.y, 15, 15);
}