zooming and coordinates for an image
in
Programming Questions
•
1 year ago
I know there has been a few threads about this, but I'm having trouble wrapping my head around it.
I've made a simple image viewer that can pan up, down, left and right. It can zoom in and out. I'm using scale and translate to accomplish this.
Positioning isn't managed via mouse, but keyboard buttons in a "latch" type mode. Up, down, left and right are their respective keys. E is zoom in, W is zoom out. Space "stops" the current action.
When I zoom, the scaling does so in respect to the image's center, and not the center of the screen. I know I need to adjust the positioning when I zoom, but I haven't found the right formula to do so.
I have no idea what I am doing anymore and my brain hurts. What's the best way to translate the coordinates in relation to the scaling ratio? Any help is greatly appreciated.
- import processing.opengl.*;
- PImage enhanceImage;
- float scalePercent = 1;
- int imgX = 0;
- int imgY = 0;
- boolean moveLeft = false;
- boolean moveRight = false;
- boolean moveUp = false;
- boolean moveDown = false;
- boolean moveIn = false;
- boolean moveOut = false;
- boolean moveStop = true;
- void setup() {
- size(640, 480,OPENGL);
- enhanceImage = loadImage("example_image.jpg");
- imgX=width/2;
- imgY=height/2;
- startSize();
- }
- void draw() {
- background(0);
- imageMode(CENTER);
- pushMatrix();
- translate(imgX,imgY);
- scale(scalePercent);
- image(enhanceImage,0,0);
- popMatrix();
- moveRoutine();
- textRoutine();
- drawLines();
- }
- void moveRoutine(){
- if(moveIn){
- moveStop=false;
- scalePercent+=.01;
- }
- if(moveOut){
- moveStop=false;
- scalePercent-=.01;
- }
- if(moveLeft){
- moveStop=false;
- imgX--;
- }
- if(moveRight){
- moveStop=false;
- imgX++;
- }
- if(moveUp){
- moveStop=false;
- imgY--;
- }
- if(moveDown){
- moveStop=false;
- imgY++;
- }
- if(moveStop){
- moveIn = false;
- moveOut = false;
- moveLeft = false;
- moveRight = false;
- moveUp = false;
- moveDown = false;
- }
- }
- void textRoutine(){
- text(imgX + "x, " + imgY + "y", width/2, height-20);
- }
- void drawLines(){
- line(width/2,0,width/2,height);
- line(0,height/2,width,height/2);
- }
- void startSize(){
- float originalWidth = enhanceImage.width;
- float originalHeight = enhanceImage.height;
- float tempscalePercent;
- if (originalWidth>originalHeight){
- scalePercent = width/originalWidth;
- //image width in relation to scene width = scale percentage
- }
- else if (originalWidth<=originalHeight){
- scalePercent = height/originalHeight;
- println(scalePercent);
- }
- }
- void keyPressed() {
- if (key == 'e') {
- moveIn=true;
- //scalePercent+=.01;
- }
- if (key == 'w') {
- moveOut=true;
- //scalePercent-=.01;
- }
- if(key == ' '){
- moveStop=true;
- moveIn = false;
- moveOut = false;
- moveLeft = false;
- moveRight = false;
- moveUp = false;
- moveDown = false;
- println(moveStop);
- }
- if (key ==CODED){
- if (keyCode == UP){
- moveUp=true;
- //imgY++;
- }
- else if (keyCode == DOWN){
- moveDown=true;
- //imgY--;
- }
- else if (keyCode == LEFT){
- moveLeft=true;
- //imgX++;
- }
- else if (keyCode == RIGHT){
- moveRight=true;
- //imgX--;
- }
- }
- }
1