如何在我的处理程序上制作一个按钮，单击该按钮会显示更多图片？

Question

我正在为我的计算机科学课设计一个视频游戏。到目前为止，一切正常，游戏涉及将图片拖动到屏幕的某些部分。但是，窗口不够大，无法包含所有图像，因此我想制作一个“下一步”按钮，该按钮将在同一窗口中打开一个新的项目页面，同时还允许拖动的图像保留在一边。基本上，我只希望屏幕的一部分能够移动到新框架。有点像通向程序新“场景”的菜单按钮。

我正在使用 Eclipse。

import processing.core.PApplet;
import processing.core.PImage;
import java.awt.event.MouseEvent;

@SuppressWarnings("serial")
public class Step1 extends  PApplet
{
//curly brown
float x = 900;
float y = 30;
float imageWidth = 175;
float imageHeight = 175;
//long brown
float x2 = 800;
float y2 = 30;
//royal dress
float x3 = 845;
float y3 = 170;
float imageWidth2 = 400;
float imageHeight2 = 400;
//flower dress
float x4 = 850;
float y4 = 145;
//black and pink dress
float x5 = 600;
float y5 = 170;
//black straight
float x6 = 700;
float y6 = 30;

boolean mouseInImage = false;
boolean mouseInImage2 = false;
boolean mouseInImage3 = false;
boolean mouseInImage4 = false;
boolean mouseInImage5 = false;
boolean mouseInImage6 = false;

PImage img;
//hairs
PImage curlyBrown = loadImage("CurleyBrown.png");
PImage longBrown = loadImage("LongBrown.png");
PImage blackStraight = loadImage("BlackStraight.png");

//dresses
PImage blackAndPinkDress = loadImage("BlackAndPinkDress.png");
PImage blackDress = loadImage("BlackDress.PNG");
PImage blackStripesDress = loadImage("BlackStripesDress.png");
PImage flowerDress = loadImage("FlowerDress.png");
PImage sparklyDress = loadImage("SparklyDress.png");
PImage royalDress = loadImage("RoyalDress.png");

public void setup()
{
    size(1024, 576);
    background(255, 255, 255, 255);
    img = loadImage("Body1.png");

}

public void draw()
{
    background(255, 255, 255, 255);
    image(img, 250, 50);
    image(royalDress, x3, y3);
    image(flowerDress, x4, y4);
    image(blackStripesDress, 680, 70);
    image(blackDress, 600, 65);
    image(blackAndPinkDress, x5, y5);
    image(sparklyDress, 500, 150);
    //hair
    image(longBrown, x2, y2, imageWidth, imageHeight);
    image(curlyBrown, x, y, imageWidth, imageHeight);
    image(blackStraight, x6, y6, 125, 145);
}

public void mousePressed(MouseEvent e)
{
    if(mouseX > x && mouseX < x + imageWidth && mouseY > y && mouseY < y + imageHeight)
        mouseInImage = true;
    else if(mouseX > x2 && mouseX < x2 + imageWidth && mouseY > y2 && mouseY < y2 + imageHeight)
        mouseInImage2 = true;
    else if(mouseX > x3 && mouseX < x3 + imageWidth2 && mouseY > y3 && mouseY < y3 + imageHeight2)
        mouseInImage3 = true;
    else if(mouseX > x4 && mouseX < x4 + imageWidth2 && mouseY > y4 && mouseY < y4 + imageHeight2)
        mouseInImage4 = true;
    else if(mouseX > x5 && mouseX < x5 + imageWidth2 && mouseY > y5 && mouseY < y5 + imageHeight2)
        mouseInImage5 = true;
    else if(mouseX > x6 && mouseX < x6 + 125 && mouseY > y6 && mouseY < y6 + 145)
        mouseInImage6 = true;
}

public void mouseDragged()
{
    if(mouseInImage)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x += deltaX;
        y += deltaY;
    }
    else if(mouseInImage2)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x2 += deltaX;
        y2 += deltaY;
    }
    else if(mouseInImage3)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x3 += deltaX;
        y3 += deltaY;
    }
    else if(mouseInImage4)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x4 += deltaX;
        y4 += deltaY;
    }
    else if(mouseInImage5)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x5 += deltaX;
        y5 += deltaY;
    }
    else if(mouseInImage6)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x6 += deltaX;
        y6 += deltaY;
    }
}

public void mouseReleased()
{
    mouseInImage = false;
    mouseInImage2 = false;
    mouseInImage3 = false;
    mouseInImage4 = false;
    mouseInImage5 = false;
    mouseInImage6 = false;
}

}

Answer 1

主要有两种方法。

方法 1： 绘制所有图片，并提供一种滚动方式。想想滑动条的工作原理。

这是一个使用点而不是图像的愚蠢示例：

ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
  size(500, 500);
  for (int i = 0; i < 1000; i++) {
    points.add(new PVector(random(1000), random(height)));
  }
}

void draw() {
  background(0);

  for (PVector point : points) {
    ellipse(point.x, point.y, 10, 10);
  }
}

void keyPressed() {
  if (keyCode == LEFT) {
    for (PVector point : points) {
      point.x--;
    }
  } else if (keyCode == RIGHT) {
    for (PVector point : points) {
      point.x++;
    }
  }
}

这个例子移动了所有的点，但是你可以直接调用translate()。您还可以查看一个为您实现滑块的 GUI 库。

其实Processing自带了一个如何实现滑块的例子。从 PDE 转到 File > Examples，然后在示例窗口中转到 Topics > GUI > Scrollbar。

方法二：将图片拆分成页面，然后一次绘制一页。

另一个小例子：

ArrayList<PVector> pageOne = new ArrayList<PVector>();
ArrayList<PVector> pageTwo = new ArrayList<PVector>();

boolean drawPageOne = true;

void setup() {
  size(500, 500);
  for (int i = 0; i < 500; i++) {
    pageOne.add(new PVector(random(width), random(height)));
    pageTwo.add(new PVector(random(width), random(height)));
  }
}

void draw() {
  background(0);

  if (drawPageOne) {
    for (PVector point : pageOne) {
      ellipse(point.x, point.y, 10, 10);
    }
  } else {
    for (PVector point : pageTwo) {
      ellipse(point.x, point.y, 10, 10);
    }
  }
}

void mouseClicked() {
  drawPageOne = !drawPageOne;
}

此示例仅使用两个独立的 ArrayList 实例和一个 boolean 在它们之间切换，但您可以更有趣地使用页面数组和索引。