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

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() {

    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);

}