如何从 Processing.js 中的未来处理线中删除变换效果

Question

如果这个问题的答案在这个网站的某个地方，我提前道歉。我对此很陌生，如果答案在堆栈溢出中，我找不到它的主要原因是因为我不知道正确的术语。

我在 class 有一个非常简单的项目，就是在 processing.js 制作动物。

我的问题是，转换 "lines" 它会堆叠。假设您有两条变换线，它们相乘或堆叠。

noFill();
scale(2, 2);
    rect(100, 100, 100, 100);
scale(3, 3);
    rect(100, 100, 100, 100);

<script src="http://processing.js"></script>

第一个矩形的大小是原来的两倍，第二个矩形的大小是原来的 6 倍。（对我而言）的目的是让第二个矩形不是 6 倍大小，而是 3 倍大小。我知道我可以将它缩放到一个较低的数字，但是当我缩放了 5 个不同的对象并且它还堆叠旋转时，这会变得非常棘手，参考最后一个旋转点。如果有人知道一条线可以将它作为一个不同的对象分开，或者删除堆叠，就好像它位于代码的“顶部（行数最少）”，我们将不胜感激。

感谢您抽出宝贵时间阅读本文。如果您想要我项目的代码，请询问！

Answer 1

听起来您只是在寻找 pushMatrix() 和 popMatrix() 函数。更多信息可以在 the reference 中找到，但基本上它看起来像这样：

pushMatrix();
scale(2, 2);
rect(100, 100, 100, 100);
popMatrix();

pushMatrix();
scale(3, 3);
rect(100, 100, 100, 100);
popMatrix();

Answer 2

您好，欢迎来到 Stack Overflow。您的代码的问题（如您所知）是变换（矩阵）操作（平移、旋转和缩放）堆叠（加在一起）。它们实际上是相乘的矩阵（线性代数）。

要解决您的问题，您要做的是在转换之前调用 pushMatrix()，进行转换，绘制矩形或椭圆或其他任何内容，然后调用 popMatrix()。

pushMatrix (http://processingjs.org/reference/pushMatrix_/) 将当前变换矩阵保存（推）到堆栈上，即保存它以便稍后取回。
popMatrix() (http://processingjs.org/reference/popMatrix_/) 丢弃当前变换（将其弹出）并将旧矩阵变换从堆栈中取回，即重置变换。

因此您的代码将如下所示：

noFill();
pushMatrix(); // save current transform (no transform)
    scale(2, 2);
    rect(100, 100, 100, 100);
popMatrix(); // get old transform back (no transform)
pushMatrix();
    scale(3, 3);
    rect(100, 100, 100, 100);
popMatrix();

如有任何问题，请随时提出。
另请查看处理 js 文档。您可能会发现它有帮助：http://processingjs.org/reference/

编辑
您也可以调用 resetMatrix() (http://processingjs.org/reference/resetMatrix_/)，因为您只想将转换恢复为无转换。

noFill();
    scale(2, 2);
rect(100, 100, 100, 100);
resetMatrix();//reset transform, i.e. erase the scale
    scale(3, 3);
rect(100, 100, 100, 100);

编码愉快！

Answer 3

我知道 popMatrix()/resetMatrix() 可能是您的最佳选择，但通过一些数学运算，您可能不必那样做（但它仍然可能是您的最佳选择）。

鉴于此：

pushMatrix();
scale(a, a);
rect(x, y, w, h);
scale(b, b);
rect(x, y, w, h);
popMatrix();

如果您希望第二个矩形以 b 的比例绘制，并且不希望缩放比例堆叠，您可以这样做：

…
scale(a/b, a/b);
…

a 代表第一个比例的比例因子，d b 代表你想要的缩放形状与原始尺寸相比的尺寸。在你的例子中，a = 2，b = 3。所以，

…
scale(2, 2);
…
scale(3/2, 3/2);
rect(x, y, w, h);

如果在另一个 pushMatrix() 中缩放，矩形将是相同的。但您可能仍想坚持使用 popMatrix() 和 resetMatrix()。

如何从 Processing.js 中的未来处理线中删除变换效果

How to remove transform effects from future processing lines in Processing.js

processing.js