绘制正方形时按键问题

Question

I am trying to add a square to the canvas when a mouse key is pressed and i want it to remain on the canvas when the mouse key is released, but it disappears when is released the key. Can anybody help me, what am i doing wrong?

int squareSize = 6;
final float DIFF_SIZE = 1;
final int MIN_COLOUR = 1;
final int MAX_COLOUR = 10;
final float INIT_RED = 100, INIT_GREEN = 50, INIT_BLUE = 80;
final float FINAL_RED = 255, FINAL_GREEN = 200, FINAL_BLUE = 250;
final float MAX_SIZE = 40;
final float X_SPACING = 10;
final float Y_SPACING = 10;
float squareX, squareY;
void setup() {
    size(600, 600);
}

void draw() {
    squareX = mouseX - squareSize / 2;
    squareY = mouseY - squareSize / 2;
    background(255);

    drawRowsOfBlocks();

}

void drawOneBlock() {

    rect(squareX, squareY, squareSize, squareSize);
    for (int i = MIN_COLOUR; mousePressed && i <= MAX_COLOUR / 10; i++)

    {
        float redValue = INIT_RED + (i - MIN_COLOUR) / (MAX_COLOUR - MIN_COLOUR)(FINAL_RED - INIT_RED);
        float greenValue = INIT_GREEN + (i - MIN_COLOUR) / (MAX_COLOUR - MIN_COLOUR)(FINAL_GREEN - INIT_GREEN);
        float blueValue = INIT_BLUE + (i - MIN_COLOUR) / (MAX_COLOUR - MIN_COLOUR) * (FINAL_BLUE - INIT_BLUE);
        fill(redValue, greenValue, blueValue);
        rect(squareX, squareY, squareSize, squareSize);
        squareSize += DIFF_SIZE;
    }
    if (squareSize > MAX_SIZE) {
        squareSize = 6;
    }
}

void drawRowsOfBlocks() {
    drawOneBlock();

    for (int i = 1; keyPressed && i <= 2; i++) {
        drawOneBlock();

        float squareY2;
        squareY2 = squareY + squareSize + Y_SPACING;
        squareY = squareY2;
    }
}

Answer 1

Create a class which can handle a rectangle. The calls needs a method to draw the rectangle ( Draw() ) and a method to update the position and size of the rectangle ( Update() ):

final int DIFF_SIZE = 1;
final int MIN_SIZE = 6;
final int MAX_SIZE = 40;

final float INIT_RED = 100, INIT_GREEN = 50, INIT_BLUE = 80;
final float FINAL_RED = 255, FINAL_GREEN = 200, FINAL_BLUE = 250;

class Rectangle {

    int pos_x, pos_y, size;
    color col;

    Rectangle(int px, int py, int s, color c) {
        col = c;
        pos_x = px; pos_y = py;
        size = s;
    }

    void Update(int px, int py, int inc_size) {
        pos_x = px; pos_y = py;

        size += inc_size;
        if (size > MAX_SIZE)
            size = MIN_SIZE;

        float w = float(size - MIN_SIZE) / float(MAX_SIZE - MIN_SIZE);
        float redValue   = INIT_RED   + w * (FINAL_RED - INIT_RED);
        float greenValue = INIT_GREEN + w * (FINAL_GREEN - INIT_GREEN);
        float blueValue  = INIT_BLUE  + w * (FINAL_BLUE - INIT_BLUE);
        col = color(int(redValue), int(greenValue), int(blueValue));
    }

    void Draw() {
        fill(col);
        rect(pos_x-size/2, pos_y-size/2, size, size);
    }
}

Use ArrayList to store all the drawn rectangles:

ArrayList<Rectangle> rectangles = new ArrayList<Rectangle>();

Add a global, boolean state ( drawingRect ) which indicates if the mouse button is currently pressed. Set the state and add new rectangle at the end of the list when the mousePressed() event occurs. rest the state when the mouseReleased() event occurs

boolean drawingRect = false;

void mousePressed() {
    drawingRect = true;

    color col = color(int(INIT_RED), int(INIT_GREEN), int(INIT_BLUE));
    rectangles.add(new Rectangle(mouseX, mouseY, MIN_SIZE, col));
}

void mouseReleased() {
    drawingRect = false;
}

Use the method .Update() , to change the location and size of the last rectangle in the list as long as the state drawingRect indicates that a mouse button is pressed.
Continuously draw all te rectangles in a loop:

void setup() {
    size(600, 600);
}

void draw() {

    if (drawingRect && rectangles.size() > 0) {
        Rectangle lastRect = rectangles.get(rectangles.size()-1);
        lastRect.Update(mouseX, mouseY, DIFF_SIZE);
    }

    background(255);

    for (int i = 0; i < rectangles.size(); i++) {
        Rectangle rect = rectangles.get(i);
        rect.Draw();
    }
}