Question

如果这个问题的答案在本网站的某个地方，我会提前道歉。我是新手，如果答案是堆栈溢出，我无法找到它的主要原因是因为我不知道正确的termanology。

我在课堂上有一个非常简单的项目，即在processing.js中制作动物。

我的问题在于变换＆＃34;线＆＃34;它堆叠。假设你有两条变换线它们相乘或叠加。

＆＃13;

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

＆＃13;

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

＆＃13;

第一个矩形的大小是其两倍，第二个矩形的大小是它的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（），进行转换，绘制您的rects或省略号等，然后调用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表示第一个刻度的比例因子，而b表示您希望缩放形状与原始尺寸相比的尺寸。在您的情况下，a = 2，b = 3。所以，

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

如果在另一个pushMatrix（）中缩放，矩形将是相同的。但是你可能仍然想要坚持使用popMatrix（）和resetMatrix（）。

如何从Processing.js

3 个答案: