处理：如何根据单击的鼠标按钮为形状赋予值？答案

【问题标题】：Processing: How do you give a shape a value based on the mouse button clicked?处理：如何根据单击的鼠标按钮为形状赋予值？
【发布时间】：2020-09-27 06:41:31
【问题描述】：

我正在尝试制作一个基于单击的按钮（左或右按钮）绘制矩形或椭圆的处理程序，我正在努力解决如何将值保存在变量 currentShape 中类鼠标按下。我应该在按下鼠标时获得一个值并将其保存到 currentShape 中，然后使用 mouseDragged 中的值来拖动并弄乱形状大小。这是我的代码：

int startX;
int startY;
int currentColor;
float currentShape;

float[] firstcornerX = {};
float[] firstcornerY = {};
float[] secondcornerX = {};
float[] secondcornerY = {};
color[] colors = {};
float[] shapes = {};

void setup() {
    size(500, 500);
    rectMode(CORNERS);
    ellipseMode(CORNERS);
}

void draw() {}

void mousePressed() {
    startX = mouseX;
    startY = mouseY;
    currentColor = color(random(255), random(255), random(255));
    if (mouseButton == LEFT) {
        ellipse(mouseX, mouseY, 100, 100);
    } else if (mouseButton == RIGHT) {
        rect(mouseX, mouseY, 100, 100);
    }
}

void mouseReleased() {
    firstcornerX = append(firstcornerX, startX);
    firstcornerY = append(firstcornerY, startY);
    secondcornerX = append(secondcornerX, mouseX);
    secondcornerY = append(secondcornerY, mouseY);
    colors = append(colors, currentColor);
    shapes = append(shapes, currentShape);
}

void mouseDragged() {
    background(255);
    for (int i = 0; i < firstcornerX.length; i++) {
        fill(colors[i]);
        rect(firstcornerX[i], firstcornerY[i], secondcornerX[i], secondcornerY[i]);
    }

    fill(currentColor);
    rect(startX, startY, mouseX, mouseY);
}

【问题讨论】：

下面我的回答有什么好玩的吗？
是的！我只是对堆栈溢出 UI 有点困惑。第一次堆栈溢出
很高兴听到这个消息。如果有用并回答了问题，请随意投票/接受绿色复选标记。查看Stackoverflow Tour 以获取有关 UI 的更多提示。欢迎:)

标签： java processing

【解决方案1】：

您确实附加了currentShape，但是您没有更改mousePressed() 中椭圆和矩形之间的形状类型，因此currentShape 在您的代码中将始终为0.0。此外，您需要使用形状类型来检查您将在屏幕上呈现的形状（代码中直接使用rect() 和ellipse() 的任何地方）

我个人会使用一个整数和几个常量作为形状类型（或enum），但是float currentShape; 可以。假设 0.0 代表椭圆，1.0 代表矩形。您可以存储这些常量，以便轻松记住哪个是哪个：

final float SHAPE_TYPE_ELLIPSE = 0.0;
final float SHAPE_TYPE_RECT    = 1.0;

由于您需要在draw() 中渲染形状，而且在mouseDragged() 中，您可以将功能封装到可重用函数中（而不是重复代码）：

void drawShape(float x1, float y1, float x2, float y2, float shapeType){
  if(shapeType == SHAPE_TYPE_ELLIPSE){
    ellipse(x1, y1, x2, y2);
  }
  if(shapeType == SHAPE_TYPE_RECT){
    rect(x1, y1, x2, y2);
  }
}

条件可能是if(shapeType == 0.0) ... else ...，但上面的内容更易于阅读/理解，并且可以扩展以支持未来的更多形状。

剩下 3 个需要仔细检查：

根据鼠标按钮更新mousePressed()中的形状类型
在mouseReleased() 中附加形状类型（您已经这样做了）
在mouseDragged() 和draw() 中相应地调用drawShape()

完整代码清单：

int startX;
int startY;
int currentColor;
float currentShape;
// constants for the supported shape types 
final float SHAPE_TYPE_ELLIPSE = 0.0;
final float SHAPE_TYPE_RECT    = 1.0;

float [] firstcornerX = {};
float [] firstcornerY = {};
float [] secondcornerX = {};
float [] secondcornerY = {};
color [] colors = {};
float [] shapes = {};

void setup () {
  size(500, 500);
  rectMode(CORNERS);
  ellipseMode(CORNERS);
}

void draw() {
  background (255);
  for (int i=0; i < firstcornerX.length; i++) {
    fill(colors[i]);
    // draw the shape from memory
    drawShape(firstcornerX[i], firstcornerY[i], secondcornerX[i], secondcornerY[i], shapes[i]);
  }
}

void drawShape(float x1, float y1, float x2, float y2, float shapeType){
  if(shapeType == SHAPE_TYPE_ELLIPSE){
    ellipse(x1, y1, x2, y2);
  }
  if(shapeType == SHAPE_TYPE_RECT){
    rect(x1, y1, x2, y2);
  }
}

void mousePressed () {
  startX = mouseX;
  startY = mouseY;
  currentColor = color(random(255), random(255), random(255));
  if(mouseButton == LEFT) {
   currentShape = SHAPE_TYPE_ELLIPSE; 
  }else if(mouseButton == RIGHT) {
   currentShape = SHAPE_TYPE_RECT; 
  }
}

void mouseReleased () {
  firstcornerX = append(firstcornerX, startX);
  firstcornerY = append(firstcornerY, startY);
  secondcornerX = append(secondcornerX, mouseX);
  secondcornerY = append(secondcornerY, mouseY);
  colors = append(colors, currentColor);
  shapes = append(shapes, currentShape);
}

void mouseDragged () {
  fill(currentColor);
  // preview the shape live
  drawShape(startX, startY, mouseX, mouseY, currentShape);
}

我正在使用旧版本的处理，并遇到mouseDragged() 的一些闪烁。或者，mousePressed 布尔值可以用于draw()：

int startX;
int startY;
int currentColor;
float currentShape;
// constants for the supported shape types 
final float SHAPE_TYPE_ELLIPSE = 0.0;
final float SHAPE_TYPE_RECT    = 1.0;

float [] firstcornerX = {};
float [] firstcornerY = {};
float [] secondcornerX = {};
float [] secondcornerY = {};
color [] colors = {};
float [] shapes = {};

void setup () {
  size(500, 500);
  rectMode(CORNERS);
  ellipseMode(CORNERS);
}

void draw() {
  background (255);
  for (int i=0; i < firstcornerX.length; i++) {
    fill(colors[i]);
    // draw the shape from memory
    drawShape(firstcornerX[i], firstcornerY[i], secondcornerX[i], secondcornerY[i], shapes[i]);
  }
  // preview the shape live if mouse is dragged:
  if(mousePressed){
    fill(currentColor);
    drawShape(startX, startY, mouseX, mouseY, currentShape);
  }
}

void drawShape(float left, float top, float right, float bottom, float shapeType){
  if(shapeType == SHAPE_TYPE_ELLIPSE){
    ellipse(left, top, right, bottom);
  }
  if(shapeType == SHAPE_TYPE_RECT){
    rect(left, top, right, bottom);
  }
}

void mousePressed () {
  startX = mouseX;
  startY = mouseY;
  currentColor = color(random(255), random(255), random(255));
  if(mouseButton == LEFT) {
   currentShape = SHAPE_TYPE_ELLIPSE; 
  }else if(mouseButton == RIGHT) {
   currentShape = SHAPE_TYPE_RECT; 
  }
}

void mouseReleased () {
  firstcornerX = append(firstcornerX, startX);
  firstcornerY = append(firstcornerY, startY);
  secondcornerX = append(secondcornerX, mouseX);
  secondcornerY = append(secondcornerY, mouseY);
  colors = append(colors, currentColor);
  shapes = append(shapes, currentShape);
}

【讨论】：