Как я могу показать только часть изображения в обработке?

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 мыши, нарисуем наше изображение, которое будет обрезано дляfree ", потому что буфер имеет только ограниченную ширину, и затем мы рисуем этот буфер , как если бы это было изображение поверх изображения, которое у нас уже есть.

Answer 2

Есть много способов сделать это, одну вещь, которую я предлагаю, это создать 3-е изображение с той же шириной и высотой, затем вы загружаете два пикселя изображения и вставляете в третье изображение часть изображения 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
}

Результат: