如何在一堆变换之后获取原点的屏幕坐标P5.js

Question

我试图跟踪对象的位置，以便我可以在p5.js后面绘制一条线索。

我使用translate()和rotate()函数在屏幕上移动对象，并且为了绘制线索，我将在数组中的每次更新后存储对象的位置。我知道有些事情就像我在处理3,the model X, Y and Z functions时所要求的，但据我所知，这些还没有在JavaScript版本中实现。

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

所以我的问题基本上是：是否有任何方法来确定（0，0）的屏幕（画布）坐标后应用一堆变换？

Answer 1

我对这个问题，这里的解决方案：

https://github.com/ChristerNilsson/Transformer

Answer 2

你应该让里面推动所有转换（）和pop（）方法和店内的位置本身使位置每帧被推入阵列。

不，你不能在一堆变换后得到（0,0）的画布坐标，因为平移将画布的原点（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); 
}