如何在“处理”中仅显示图像的一部分？

Question

我想比较演示文稿中带有移位线的两个图像（相同大小）。该行的左侧应显示一个图像，而右侧应显示另一幅图像。

这就是我尝试过的（位图和ch是图像）

PImage bitmap;
PImage ch;
int framerate = 1000;

void setup() {
  size(502, 316);
  bitmap = loadImage("bitmap_zentriert.jpg");  // Load an image into the program 
  ch = loadImage("Karte_schweiz_zentriert.jpg");  // Load an image into the program 
  frameRate(40); //framerate

}

void draw() { 

  background(255);
  image(ch, 10, 10); // the one image in the back
  image(bitmap, 10, 10, bitmap.width, bitmap.height, 10, 10, mouseX, bitmap.height); //show part of the second image in front
  rect(mouseX, 10, 1, bitmap.height-1); //make line

}

但是图像“位图”是整个图像失真。

我该怎么做？

Answer 1

有很多方法可以做到，我建议的一件事是创建一个具有相同宽度和高度的第三幅图像，然后加载两个图像像素，然后在图像的第三幅中插入image1像素，然后将第二部分插入image2，我编写了这段代码进行测试，效果很好：

PImage img1, img2, img3;

void setup() {
  size(500, 355);
  img1 = loadImage("a1.png");  // Load an image into the program 
  img2 = loadImage("a2.png");  // Load an image into the program 
  img3 = createImage(width, height, RGB); //create your third image with same width and height

  img1.loadPixels(); // Load the image pixels so you can access the array pixels[]
  img2.loadPixels();

  frameRate(40); // frame rate
}

void draw() { 
  background(255);

  // Copy first half from first image
  for(int i = 0; i < mouseX; i++)
  {
    for (int j = 0; j < height ; j++) {
      img3.pixels[j*width+i] = img1.pixels[j*width+i];
    }
  }

  // Copy second half from second image
  for(int i = mouseX; i < width; i++)
  {
    for (int j = 0; j < height ; j++) {
      img3.pixels[j*width+i] = img2.pixels[j*width+i];
    }
  }

  // Update the third image pixels
  img3.updatePixels();

  // Simply draw that image
  image(img3, 0, 0); // The one image in the back

  // Draw the separation line 
  rect(mouseX, 0, 0, height); // Make line
}

结果：

Answer 2

我建议使用PGraphics缓冲区，该缓冲区本质上是“另一个草图”，出于绘制目的，它也可以充当Image，并且绝对不要以“每秒一千帧”的速度循环播放。仅在使用redraw函数并结合鼠标移动事件来绘制新内容时才进行绘制：

PImage img1, img2;
PGraphics imagebuffer;

void setup() {
  size(502, 316);
  imagebuffer = createGraphics(width, height);
  img1 = loadImage("first-image.jpg");
  img2 = loadImage("second-image.jpg");
  noLoop();
}

void mouseMoved() {
  redraw();
}

void draw() { 
  image(img1, 0, 0);

  if (mouseX>0) {
    imagebuffer = createGraphics(mouseX, height);
    imagebuffer.beginDraw();
    imagebuffer.image(img2, 0, 0);
    imagebuffer.endDraw();
    image(imagebuffer, 0, 0);
  }
}

在我们的设置中，我们加载图像并关闭循环，因为我们将基于redraw重新绘制，然后响应鼠标移动事件，我们生成一个新的缓冲区仅与鼠标的当前x坐标一样宽，绘制我们的图像，由于缓冲区只有有限的宽度，因此图像被“免费”裁剪，然后绘制该缓冲区就像在我们已经拥有的图像之上的图像。