处理代码 - 触摸屏橡皮擦代码

Question

当我向讲师询问有关团队项目的一段代码的建议时，我被引导到这个论坛。一般的想法是有两个图像在彼此的顶部，用户可以擦除顶部图像以显示下面的图像。

使用本论坛的其他一些项目，我已经设法运行基础知识，但是一旦用户放开鼠标，我就很难将代码放到起点。

我也很感激有关如何将其转换为使用触摸屏的任何建议。我已经查看了处理应用程序中的多点触控代码，但它不允许我添加图像，如果我尝试使用计算机软件，它似乎不喜欢多点触控。有没有办法解决？

我现在的代码如下，我会很高兴所以任何建议或意见 - 提前感谢！

PImage img, front;
int xstart, ystart, xend, yend;
int ray;

void setup()
{
    size(961, 534);
    img = loadImage("back.jpg");
    front = loadImage("front.jpg");
    xstart = 0;
    ystart = 0;
    xend = img.width;
    yend = img.height;
    ray = 50;
}

void draw() 
{
    {
        img.loadPixels();
        front.loadPixels();

        // loop over image pixels 
        for (int x = xstart; x < xend; x++)
        {
            for (int y = ystart; y < yend; y++ )
            {
                int loc = x + y*img.width;
                float dd = dist(mouseX, mouseY, x, y);        
                // pixels distance less than ray  

                if (mousePressed && dd < 50)
                {
                    // set equal pixel
                    front.pixels[loc] = img.pixels[loc];
                }
                else
                {
                    if (!mousePressed)
                    {
                      // reset- this is what I have not been able to work as of yet
                      front.pixels[loc] =   ;

                    }
                }
            }
        }
        img.updatePixels();
        front.updatePixels();
        // show front image
        image(front, 0, 0);
    }    
}

Answer 1

我建议使用mask而不是更改图像的像素。创建一个空图像并将其作为掩码与图像相关联：

img = loadImage("back.jpg");
front = loadImage("front.jpg");
mask = createImage(img.width, img.height, RGB);
img.mask(mask);

如果您现在绘制两个图像，那么您只能“看到”front图像：

image(front, 0, 0);
image(img, 0, 0);

设置蒙版的颜色（255,255,255）而不是更改front的像素：

mask.pixels[loc] = color(255, 255, 255);

并将蒙版重新应用于图像

img.mask(mask);

释放鼠标按钮时，必须将掩码的像素更改回（0,0,0）或仅创建一个新的空掩码：

mask = createImage(img.width, img.height, RGB);

请参阅我将建议应用于原始代码的示例：

PImage img, front, mask;
int xstart, ystart, xend, yend;
int ray;

void setup() {
    size(961, 534);

    img = loadImage("back.jpg");
    front = loadImage("front.jpg");
    mask = createImage(img.width, img.height, RGB);
    img.mask(mask);

    xstart = 0;
    ystart = 0;
    xend = img.width;
    yend = img.height;
    ray = 50;
}

void draw() {
    img.loadPixels();
    front.loadPixels();

    // loop over image pixels 
    for (int x = xstart; x < xend; x++) {
        for (int y = ystart; y < yend; y++ ) {
            int loc = x + y*img.width;
            float dd = dist(mouseX, mouseY, x, y);        

            if (mousePressed && dd < 50) {
                mask.pixels[loc] = color(255, 255, 255);
            }
            else {
                if (!mousePressed) {
                    //mask = createImage(img.width, img.height, RGB);
                    mask.pixels[loc] = color(0, 0, 0);
                }
            }
        }
    }
    mask.updatePixels();
    img.mask(mask);

    // show front image
    image(front, 0, 0);
    image(img, 0, 0);
}