鼠标释放后填充的矩形消失

Question

我是处理新手。我正在寻找一个程序，在其中我选择图像的一个区域（例如 Photoshop 中的“矩形选择”......），这个区域有一个红色的笔触并且稍微不透明，一旦选择了该区域，矩形就会填充同一区域的像素的平均颜色和红色笔划关闭。这个想法是能够在同一个图像上多次重复这个动作。当我释放鼠标时，由于void draw(); 中的background(buff);，填充被删除。我希望保存用新颜色填充的矩形。我想我需要使用一个数组、类，但我不明白这些是如何工作的。如果有人能够帮助我，那将是一个很大的帮助。谢谢。

PImage buff1;
int x1,y1,x2,y2,h1,h2;

void setup()
{
    size(1000, 721);
    buff1 = loadImage("buff1.jpg2);
    background(buff1);
}

color extractColorFromImage(final PImage buff1) {
    buff1.loadPixels();
    color r = 1, g = 1, b = 1;

    for (final color c : buff1.pixels) {
        r += c >> 020 & 255;
        g += c >> 010 & 255;
        b += c & 255;
    }
    r /= buff1.pixels.length;
    g /= buff1.pixels.length;
    b /= buff1.pixels.length;
    return color(r, g, b);
}

void draw()
{
    background(buff1);
    rectMode(CORNERS);
    stroke(255,0,0);
    strokeWeight(2);
    strokeJoin(ROUND);
    rect(x1,y1,x2,y2,2);
    fill(255,0,0,50);
    noStroke();
    cursor(ARROW);
}

void mousePressed()
{
    x1 = mouseX;
    y1 = mouseY;
}

void mouseDragged()
{
    x2 = mouseX;
    y2 = mouseY;
}

void mouseReleased()
{
    int H1 = abs(1+x2-x1);
    int H2 = abs(1+y2-y1);

    for (int i=0; i<width; i+=H1)
    {
        for (int j=0; j<height; j+=H2)
        {
            PImage newImg = buff1.get(x1, y1, H1, H2);
            fill(extractColorFromImage(newImg), 40);
            noStroke();
            cursor(ARROW);
        }
    }
}

Answer 1

loadPixels() 加载图像的像素数据后，pixels[] 可以访问和更改加载的像素。
updatePixels() 使用其 pixels[] 数组中的数据更新图像：

void mouseReleased()
{
    int x_1 = min(x1,x2);
    int y_1 = min(y1,y2);
    int x_2 = max(x1,x2);
    int y_2 = max(y1,y2);

    PImage newImg = buff1.get(x_1, y_1, x_2-x1+1, y_2-y1+1);
    color new_color = extractColorFromImage(newImg);

    buff1.loadPixels();
    for (int i = x_1; i <= x_2; i++)
    {
        for (int j = y_1; j <= y_2; j++)
        {
             buff1.pixels[j*buff1.width+i] = new_color;
        }
    }
    buff1.updatePixels();
}

---

当按下鼠标按钮时，我建议也设置（x2，y2）：

void mousePressed()
{
    x1 = mouseX;
    y1 = mouseY;
    x2 = x1;
    y2 = y1;
}

---

---

lerpColor() 可以选择将原始颜色与新颜色混合：

PImage newImg = buff1.get(x_1, y_1, x_2-x1+1, y_2-y1+1);
color new_color = extractColorFromImage(newImg);

buff1.loadPixels();
for (int i = x_1; i <= x_2; i++)
{
    for (int j = y_1; j <= y_2; j++)
    {
         color orig_color = buff1.pixels[j*buff1.width+i];
         buff1.pixels[j*buff1.width+i] = lerpColor(orig_color, new_color, 0.5); 
    }
}
buff1.updatePixels();