contraining to the edges of the image for a simple zoom and pan script

nemuro

Hello,

I'm trying a simple zoom in and pan script. Everything works until I try a simple way of restricting the panning so that the image isn't too much off screen. The issue is that pinch to zoom alternates the variables in a way that the limits would have to change too. Eg. If "240" is enough at 1:1 scale for x axis in order to image to have reached the left edge, if I play with zoom, the new limit would be a different number let's say negative "-143". I tried tying the limit to half the width of the photo, I've tried everything that I could think of. I believe the key would be a formula ( I'm not very good at math ) that translates the pinch to zoom difference into the new panning limit. It doesn't have to be spot on, just I don't want to be able to remain with the screen blank.

Image(1738x1445px) direct link http://postimg.org/image/sf6trtb0v/

P.S. Tried using scale method, but on the phone it lags, so I'm using the manual resize method below.

Thank you in advance!

import android.view.MotionEvent;
import ketai.ui.*;

color bgc = (255);
float imgSizeX, imgSizeY, imgSizeR, x, y, limitX;
PImage img;
KetaiGesture gesture;



void setup() {
  gesture = new KetaiGesture(this);
  img = loadImage("myimage.jpg");  // Load the image into the program 1738x1445px
  imgSizeY = height;
  imgSizeR = imgSizeY / 6; // define aspect ratio
  imgSizeX = imgSizeY + imgSizeR;
  x = 0;
  y = 0;
  limitX = width/2;
  background(bgc); 
  imageMode(CENTER);
}

void draw() {
  pushMatrix();
  translate(x, y); 
  image(img, width/2, height/2, imgSizeX, imgSizeY);
  popMatrix();
}


void mouseDragged() {
  println("x bef loop: "+x);
  println("imgSizeX bef loop: "+imgSizeX);

  x += mouseX - pmouseX;
  println("x aft loop: "+x);
  if (x < (imgSizeX / 10)) {  x += mouseX - pmouseX;  }
  if (x >= (imgSizeX / 10)) {  x=imgSizeX / 11;  } 
    if (x < imgSizeX - imgSizeX * 1.55) { x= imgSizeX - imgSizeX * 1.54; }

  if (y < (imgSizeY / 10)) {  y += mouseY - pmouseY;  }
  if (y >= (imgSizeY / 10)) {  y=imgSizeX / 11;  } 
  if (y < imgSizeY - imgSizeY * 1.55) { x= imgSizeY - imgSizeY * 1.54; }

  //else { if (abs(x) < limitX) {  x += mouseX - pmouseX; println("X-----"+x); } }
  //if (y < (imgSizeY / 10)) {  y += mouseY - pmouseY;  }
  //if (y >= (imgSizeY / 10)) {  y=imgSizeY / 11;  }
}

// resize cube on pinch
void onPinch(float x, float y, float d)  { // .. 17
  // make sure image doesn't get too big or small
  if (imgSizeY > 400)
    imgSizeY += d;
  else
    imgSizeY = 400;

  if (imgSizeY < 3000)
    imgSizeY += d;
  else
    imgSizeY = 2999;

    imgSizeR = imgSizeY / 6;
    imgSizeX = imgSizeY + imgSizeR; // keep the aspect ratio
}

public boolean surfaceTouchEvent(MotionEvent event)  {
  //call to keep mouseX and mouseY constants updated
  super.surfaceTouchEvent(event);
  //forward events
  return gesture.surfaceTouchEvent(event);
}

nemuro

Any help is welcomed.