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

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

我建议使用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 坐标一样宽，绘制我们的图像，该图像被“免费”裁剪，因为缓冲区只有有限的宽度，然后我们绘制 该缓冲区，就好像它是图像一样在我们已经拥有的图像之上。

Answer 2

有很多方法可以做到这一点，我建议的一件事是创建一个具有相同宽度和高度的第三个图像，然后加载两个图像像素并插入图像 1 像素的第三个图像部分，然后从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
}

结果：