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

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

如果您现在绘制两个图像，那么您只能"see" front 个图像：

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

设置mask的颜色(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);
}

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

Processing code- Touch screen eraser code

java

processing

multi-touch