本教程旨在解决processing中图形旋转时出现偏移的问题，并实现多个图形的独立旋转。我们将深入探讨processing的坐标系统、`translate()`、`rotate()`等变换函数，并重点介绍如何利用`pushmatrix()`和`popmatrix()`创建独立的变换上下文，从而使图形在保持自身位置的同时，根据鼠标输入进行平移和独立方向的旋转，最终提供一个结合相对坐标和变换管理的完整解决方案。
在Processing等图形编程环境中，对屏幕上的图形进行移动（平移）、旋转和缩放是常见的操作。然而，初学者常遇到的一个问题是，当尝试旋转图形时，它们往往会“飞出”屏幕，而不是原地旋转。这通常是因为对Processing的坐标系统和变换机制理解不足。
Processing的绘图操作默认基于一个全局的坐标系统，其原点(0,0)位于画布的左上角。当您使用translate()、rotate()或scale()等函数时，这些变换会应用于整个坐标系统，影响后续所有绘制操作。
问题在于，如果您的图形是使用绝对坐标（例如triangle(1000,600,900,850,800,600)）定义的，并且其中心点与坐标原点不重合，那么直接应用rotate()会导致图形围绕画布的(0,0)点旋转，从而使其看起来像是在“飞出”屏幕。要实现原地旋转，图形需要围绕其自身的中心点旋转。
为了实现图形的独立变换（例如，一个图形旋转，而另一个图形不旋转或以不同方式旋转），我们需要为每个图形创建独立的变换上下文。这就是pushMatrix()和popMatrix()的作用。
通过在pushMatrix()和popMatrix()之间执行绘制和变换操作，您可以确保这些变换仅作用于该代码块内的图形，而不会影响块外部的图形或全局坐标系统。这使得对不同图形应用独立的平移、旋转和缩放成为可能。
现在，我们将结合这些概念，逐步构建一个能够通过鼠标拖动平移，并使两个星形图形独立旋转的Processing程序。
首先，我们需要一个机制来响应鼠标拖动事件，并更新图形的平移位置。
float offsetX = 0; // 用于存储全局平移的X偏移量
float offsetY = 0; // 用于存储全局平移的Y偏移量
float rotationAngle = 0; // 用于存储旋转角度，这里暂不使用
void setup(){
size(1800, 1000); // 设置画布大小
}
void draw() {
background(0); // 清空背景
// 应用全局平移，使整个场景可以被拖动
translate(offsetX, offsetY);
// 在这里绘制您的图形...
// 为了演示平移，我们暂时使用原始的绝对坐标绘制
drawStarsAbsolute();
fill(0,0,0);
ellipse(900 - (1800/2) + offsetX, 500 - (1000/2) + offsetY, 425, 425); // 绘制中心圆，注意需要考虑translate的影响
}
void mouseDragged(){
// 当鼠标被拖动时，更新偏移量
// 这里的offsetX和offsetY直接设置为mouseX和mouseY，
// 配合translate(offsetX, offsetY)可以将画布原点移动到鼠标位置
offsetX = mouseX;
offsetY = mouseY;
}
// 原始的图形绘制函数，使用绝对坐标
void drawStarsAbsolute() {
beginShape();
fill(139,19,191); triangle(1000,600,900,850,800,600);
fill(20,134,245); triangle (1100,400,1250,600,1000,600);
fill(191,8,8); triangle(800,600,550,600,700,400);
fill(86,165,3); triangle(700,400,550,100,900,350);
fill(167,167,166); triangle(900,350,1250,100,1100,400);
endShape();
beginShape();
fill(139,19,191); triangle(800,350,900,100,1000,350);
fill(86,165,3); triangle(1000,350,1250,350,1100,550);
fill(167,167,166); triangle(700,550,550,350,800,350);
fill(20,134,245); triangle(700,550,550,850,900,650);
fill(191,8,8); triangle(1100,550,1250,850,900,650);
endShape();
}注意: 在上述代码中，为了演示全局平移，我们直接使用了offsetX = mouseX; offsetY = mouseY;。当translate(offsetX, offsetY)被调用时，画布的原点会被移动到鼠标当前的位置。如果您的图形是使用绝对坐标（例如900,500）绘制的，那么它们也会随着这个原点的移动而移动。为了使图形围绕一个固定的逻辑中心点（例如width/2, height/2）进行拖动，并且图形本身是相对该中心点绘制的，通常会在mouseDragged中计算偏移量：offsetX = mouseX - width/2; offsetY = mouseY - height/2;，但这要求图形的绘制也以(0,0)为中心。
要实现原地旋转，图形的定义必须是相对于其旋转中心的。如果图形的中心点是(Cx, Cy)，那么图形的所有顶点坐标都应该表示为(Vx - Cx, Vy - Cy)。这样，当您对图形应用translate(Cx, Cy)将其移动到屏幕上的目标位置，再应用rotate(angle)时，它就会围绕其自身新的原点（即(Cx, Cy)）旋转。
原始代码中的星形图形是使用绝对坐标绘制的，它们的逻辑中心大致在(900, 500)附近。为了方便旋转，我们需要将这些坐标转换为相对于(900, 500)的相对坐标。例如，如果一个顶点是(1000, 600)，那么相对于中心(900, 500)，它的相对坐标就是(1000-900, 600-500)，即(100, 100)。
现在，我们将结合pushMatrix()、popMatrix()、translate()、rotate()以及相对坐标来构建最终的解决方案。我们将使用frameCount作为旋转角度的来源，以实现连续旋转，并通过正负值控制旋转方向。
float globalOffsetX = 0; // 全局平移的X偏移量
float globalOffsetY = 0; // 全局平移的Y偏移量
void setup(){
size (1800,1000); // 设置画布大小
// 确保平滑绘制，避免锯齿
smooth();
}
void draw() {
background (0); // 清空背景
// 1. 应用全局平移：整个场景随鼠标拖动
// 这里的globalOffsetX和globalOffsetY直接是鼠标位置，
// 意味着整个画布的原点被移动到鼠标位置。
// 因为下面的图形都以(0,0)为中心绘制，所以translate(globalOffsetX, globalOffsetY)
// 相当于将所有图形的逻辑中心移动到鼠标位置。
translate(globalOffsetX, globalOffsetY);
// 第一个星形：顺时针旋转
pushMatrix(); // 保存当前坐标系统状态
// 旋转变换：围绕当前原点（即translate(globalOffsetX, globalOffsetY)后的位置）旋转
rotate(frameCount * 0.01); // frameCount是一个递增的变量，用于连续旋转
// 绘制第一个星形（使用相对于其中心点的坐标）
fill(139,19,191); triangle( 100, 100, 0, 350, -100, 100);
fill(20,134,245); triangle( 200, -100, 350, 100, 100, 100);
fill(191,8,8); triangle(-100, 100, -350, 100, -200, -100);
fill(86,165,3); triangle(-200, -100, -350, -400, 0, -150);
fill(167,167,166); triangle( 0, -150, 350, -400, 200, -100);
popMatrix(); // 恢复到pushMatrix()之前的坐标系统状态
// 第二个星形：逆时针旋转
pushMatrix(); // 再次保存当前坐标系统状态
// 旋转变换：逆时针旋转
rotate(frameCount * -0.01);
// 绘制第二个星形（使用相对于其中心点的坐标）
fill(139,19,191); triangle(-100, -150, 0, -400, 100, -150);
fill(86,165,3); triangle( 100, -150, 350, -150, 200, 50);
fill(167,167,166); triangle(-200, 50, -350, -150, -100, -150);
fill(20,134,245); triangle(-200, 50, -350, 350, 0, 150);
fill(191,8,8); triangle( 200, 50, 350, 350, 0, 150);
popMatrix(); // 恢复到pushMatrix()之前的坐标系统状态
// 绘制中心圆（同样使用相对于当前原点(0,0)的坐标）
fill(0,0,0);
// 这里使用ellipse而不是circle，因为Processing自带的circle可能与自定义的冲突
ellipse(0, 0, 425, 425);
}
// 鼠标拖动事件处理
void mouseDragged(){
// 更新全局平移偏移量，使图形跟随鼠标移动
globalOffsetX = mouseX;
globalOffsetY = mouseY;
}
// 如果您需要一个自定义的circle函数，可以这样定义
// void circle(float x, float y, float r){
// ellipse(x, y, r, r);
// }通过本教程，我们学习了如何在Processing中利用translate()、rotate()以及关键的pushMatrix()和popMatrix()函数，实现对图形的精确控制。理解这些变换的工作原理，尤其是如何通过相对坐标和独立的变换上下文来管理图形，是创建复杂、交互式Processing动画和应用程序的基础。掌握这些技巧，您将能够让屏幕上的图形按照您的意愿灵活舞动，而不再担心它们会“飞出”画面。
以上就是Processing中实现基于鼠标输入的图形旋转与独立变换教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
126
收藏
