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

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

我建议使用蒙版而不是更改图像的像素。创建一个空图像并将其作为掩码关联到图像：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() {&nbsp; &nbsp; size(961, 534);&nbsp; &nbsp; img = loadImage("back.jpg");&nbsp; &nbsp; front = loadImage("front.jpg");&nbsp; &nbsp; mask = createImage(img.width, img.height, RGB);&nbsp; &nbsp; img.mask(mask);&nbsp; &nbsp; xstart = 0;&nbsp; &nbsp; ystart = 0;&nbsp; &nbsp; xend = img.width;&nbsp; &nbsp; yend = img.height;&nbsp; &nbsp; ray = 50;}void draw() {&nbsp; &nbsp; img.loadPixels();&nbsp; &nbsp; front.loadPixels();&nbsp; &nbsp; // loop over image pixels&nbsp;&nbsp; &nbsp; for (int x = xstart; x < xend; x++) {&nbsp; &nbsp; &nbsp; &nbsp; for (int y = ystart; y < yend; y++ ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; int loc = x + y*img.width;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float dd = dist(mouseX, mouseY, x, y);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (mousePressed && dd < 50) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mask.pixels[loc] = color(255, 255, 255);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!mousePressed) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //mask = createImage(img.width, img.height, RGB);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mask.pixels[loc] = color(0, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; mask.updatePixels();&nbsp; &nbsp; img.mask(mask);&nbsp; &nbsp; // show front image&nbsp; &nbsp; image(front, 0, 0);&nbsp; &nbsp; image(img, 0, 0);}&nbsp; &nbsp;&nbsp;