When i rotate an image it goes off screen

问题

im trying to rotate an image 90 degrees but when i do it goes off screen (to the left of the window) here is my code:

here is a link to my image: http://imgur.com/gallery/pQ85Z

right now im just trying to get it to rotate when i press 'r' but after this i need to make it rotate when it hits the edge of the screen.

PImage head;
int fizzyX = 400;
int fizzyY = 50;
int movementX=0;
int movementY=0;
float x;

void setup() {
  size(800,800);
  background(255);
  head = loadImage("Fizzy.PNG");
}

void collisionDetection() {
  if (fizzyX == (750)) {
    movementX=-1;
    key = 'a';
  }
}



void keyPressed() {
  if (key == 'a' || key == 'A') {
    movementX = -1;
    movementY = 0;
  }
  if (key == 'd' || key == 'D') {
    movementX = 1;
    movementY = 0;
  }
  if (key == 'w' || key == 'W') {
    movementX = 0;
    movementY = -1;
  }
  if (key == 's' || key == 'S') {
    movementX = 0;
    movementY = 1;
  }
  if (key == 'r') {
    x = PI/2;
  }
}

void draw() {
  rotate(x);
  background(255);
  imageMode(CENTER);
  image(head,fizzyX,fizzyY);
  fizzyX+=movementX;
  fizzyY+=movementY;
  keyPressed();
  collisionDetection();
  translate(width/2,height/2);

}

回答1:

The rotate() function performs rotation around the origin, which by default is at 0,0. This causes your image to rotate around the upper-left corner of the window, which causes your image to go off the screen.

If you want to rotate the image around its center, then you first have to move the origin to the center of the image. You do this using the translate() function, but you have to do it before you to the rotation.

Putting it together, it would look like this:

void draw() {

  background(255);

  imageMode(CENTER);
  translate(fizzyX, fizzyY);
  rotate(x);

  image(head,0,0);

  fizzyX+=movementX;
  fizzyY+=movementY;
  collisionDetection();

}

Also note that you should not manually call the keyPressed() function. Processing will call it for you.

回答2:

More detailed, with my suggestions:

-Each time you press r x must increase in HALF_PI (HALF_PI is a constant defined in processing)

-Each time you do a transformation you should use pushMatrix() and popMatrix(), in order to transform only what lies between then.

-Put the origin where you want to place the figure, then rotate, and then put the figure in 0,0. This is your corrected code, and it works like a charm.

-Use PVector when possible, makes code easier to understand, less cluttered with that variableX, variableY

-X is a bad name rotationAngle would be a better one

Try it, it works and its way more legible.

PImage head;
PVector fizzy;
PVector movement;
float rotationAngle;

void setup(){
  size(800,800);
  fizzy=new PVector(400,50);
  movement=new PVector(0,0);
  rotationAngle=0;
  background(255);
  head = loadImage("Fizzy.png");
}

void collisionDetection() {
  if (fizzy.x == (750)) {
    movement.set(-1,0);
  }
}

void keyPressed() {
  if (key == 'a' || key == 'A') {
    movement.set(-1,0);
  }
  if (key == 'd' || key == 'D') {
    movement.set (1,0);
  }
  if (key == 'w' || key == 'W') {
    movement.set (0,-1);
  }
  if (key == 's' || key == 'S') {
    movement.set (0,1);
  }
  if (key == 'r') {  
     rotationAngle+=HALF_PI;  
  }
}

void draw() {
  background(255);
  pushMatrix();
  translate(fizzy.x,fizzy.y);
  rotate(rotationAngle);
  imageMode(CENTER);
  image(head,0,0);
  popMatrix();

  fizzy.add(movement);
  collisionDetection();
}

来源：https://stackoverflow.com/questions/43579415/when-i-rotate-an-image-it-goes-off-screen