Zoom

Hva

Her skal vi se på et eksempel på hvordan vi kan lage en zoom-effekt.

Begreper som du finner i dokumentasjonen til Processing Reference

PImage, loadImage(), copy(), map()
mousePressed(), mouseDragged(), mouseReleased()

Relevante Skisser

zoom, zoom2

Vi bruker et metrokart fra Paris som eksempel. Et (forminsket) bilde av sketchen:

Koden er i sin helhet slik:

// bilde av kartet
PImage KIM;
// området vil zoome
int zoomL,zoomT,zoomW,zoomH;
// om vi flytter zoom området
boolean dragging;
void setup() {
  size(800,800); 
  KIM = loadImage("metroParis.png");  
  zoomL=50;zoomT=50;
  zoomW=200;
  zoomH=200;
  dragging=false;
}
void draw(){
  image(KIM, 0, 0, width, height);
  strokeWeight(3);
  rect(zoomL,zoomT,zoomW,zoomH); 
  copy(KIM,
    int(map(zoomL,0,width,   0,KIM.width)),
    int(map(zoomT,0,height,   0,KIM.height)),
    int(map(zoomW*0.5,0,width,   0,KIM.width)),
    int(map(zoomH*0.5,0,height,   0,KIM.height)),          
    zoomL,zoomT,zoomW,zoomH);          
}
void mousePressed(){
  if((mouseX < zoomL+zoomW)&&(mouseX > zoomL)&&
     (mouseY< zoomT+zoomH)&& (mouseY > zoomT)){
      dragging=true;
    }
}
void mouseDragged(){
  if(dragging){
    zoomL+=(mouseX-pmouseX);
    zoomT+=(mouseY-pmouseY);
    zoomL=max(0,min(zoomL,width-20));
    zoomT=max(0,min(zoomT,height-20));
  }
}
void mouseReleased(){
  dragging=false;
}

Nøkkelen til å få dette til er copy funksjonen. Den lar oss kopiere bildepunkter (piksler) enten fra et område på skissen eller, som her, en del av et bilde. Det vanskeligste med denne løsningene varr å få tak i riktig bildeområde er map funksjonen hjelper oss å få til riktige forholdstall. Du ser dessuten at jeg har multiplisert med 0.5 når jeg lager forstørrelsen. Du kan eksperimentere med dette tallet og du kan prøve deg med andre bilder.

Alternativ

Her ser vi på et alternativ der vi legger visningen utenfor selve kartet. Fordelen er at det er lettera å orientere seg, mens ulempen er plass forbruket, forminsket bilde:

Koden er i sin helhet slik:

// bildet av kartet
PImage KIM;
// kartet tegnet
int kartL,kartT,kartW,kartH;
// området vi vil zoome
int zoomL,zoomT,zoomW,zoomH;
// området der vi viser det zoomede området
int showL,showT,showW,showH;
// om vi flytter zoom området
boolean dragging;
void setup() {
  size(600,900); 
  KIM = loadImage("metroLondon.png");
  kartL=kartT=0;
  kartW=600;
  kartH=600;
  
  
  zoomL=50;
  zoomT=50;
  zoomW=200;
  zoomH=100;
  
  showL=0; 
  showT=kartH; 
  showW=zoomW*3; 
  showH=zoomH*3;
  
  dragging=false;
}
void draw(){
  background(255);
  image(KIM, kartL, kartT, kartW, kartH);
  strokeWeight(3);
  noFill();
  rect(zoomL,zoomT,zoomW,zoomH); 
  copy(KIM,
          int(map(zoomL,0,kartW,   0,KIM.width)),
          int(map(zoomT,0,kartH,   0,KIM.height)),
          int(map(zoomW,0,kartW,   0,KIM.width)),
          int(map(zoomH,0,kartH,   0,KIM.height)),          
          showL,showT,showW,showH);          
}
void mousePressed(){
  if((mouseX < zoomL+zoomW)&&(mouseX > zoomL)&&
     (mouseY< zoomT+zoomH)&& (mouseY > zoomT)){
      dragging=true;
    }
}
void mouseDragged(){
  if(dragging){
    zoomL+=(mouseX-pmouseX);
    zoomT+=(mouseY-pmouseY);
    zoomL=max(0,min(zoomL,width-zoomW));
    zoomT=max(0,min(zoomT,kartH-zoomH));
  }
}
void mouseReleased(){
  dragging=false;
}