zoom in/out is not smooth

General Discussion Other

mataarsak

in General Discussion • Other • 1 year ago

My application is consist of several objects , images and .... when I pan into specific object and want to zoom into that the object jumps to the corner of screen always and I should again drag it to the middle of the screen . zoom is not smooth in other words. is it because I just write `zoom += 0.05;/ zoom -= 0.05` . should I do it in any other way ?

void keyPressed() {
if (key == 'a') {
zoom += 0.05;
}
else if (key == 'z') {
zoom -= 0.05;
}
scale(zoom);

Replies(1)

Jonny Stu..

Re: zoom in/out is not smooth

1 year ago

You need to be careful using scale() to do zooming because it's sensitive to the point around which you're zooming in. Below is some code I wrote to do zooming and panning using mouse dragging and the mouse wheel to zoom that might give you some ideas.

import java.awt.event.MouseWheelListener;
import java.awt.event.MouseWheelEvent;
ArrayList<City> cities;
WheelListener wheel;
float zoom = 1;
PVector scaleCentre;
void setup() {
size(500, 500);
wheel = new WheelListener();
cities = new ArrayList<City>();
for (int i = 0; i < 15; i++) {
cities.add(new City(random(-250, 250), random(-250, 250), random(10, 30)));
}
scaleCentre = new PVector(width / 2, height / 2);
}
void draw() {
background(0);
translate(scaleCentre.x, scaleCentre.y);
for (City c: cities) {
c.draw();
}
}
void mouseDragged() {
float dx = mouseX - pmouseX;
float dy = mouseY - pmouseY;
scaleCentre.x += dx;
scaleCentre.y += dy;
}
void mouseClicked() {
float worldx = mouseX - scaleCentre.x;
float worldy = mouseY - scaleCentre.y;
for (City c: cities) {
if (c.hitTest(worldx, worldy)) {
c._highlight = true;
} else {
c._highlight = false;
}
}
}
void scaleAroundPoint(City c, float statx, float staty, float scl) {
PVector transform = new PVector((statx - c._viewx) * scl, (staty - c._viewy) * scl);
c._viewx = statx - transform.x;
c._viewy = staty - transform.y;
c._viewsz *= scl;
}
class City {
float _x, _y, _sz;
float _viewx, _viewy, _viewsz;
boolean _highlight;
City(float x, float y, float sz) {
_x = x;
_y = y;
_viewx = x;
_viewy = y;
_viewsz = sz;
_sz = sz;
}
boolean hitTest(float testx, float testy) {
println("viewx: " + _viewx + " viewsz: " + _viewsz);
if ((testx > (_viewx - (_viewsz / 2))) && (testx < (_viewx + (_viewsz / 2))) && (testy > (_viewy - (_viewsz / 2))) && (testy < (_viewy + (_viewsz / 2)))) {
return true;
} else {
return false;
}
}
void draw() {
if (_highlight) {
fill(255, 0, 0);
} else {
fill(255);
}
rectMode(CENTER);
rect(_viewx, _viewy, _viewsz, _viewsz);
}
}
class WheelListener implements MouseWheelListener {
WheelListener() {
addMouseWheelListener(this);
}
void mouseWheelMoved(MouseWheelEvent e) {
float scl;
int rot;
float worldx = (mouseX - (width / 2)) / zoom;
float worldy = (mouseY - (height / 2)) / zoom;
rot = e.getWheelRotation() ;
if (rot > 0) {
scl = 0.95;
} else {
scl = 1.05;
}
zoom *= scl;
for (City c: cities) {
scaleAroundPoint(c, mouseX - scaleCentre.x, mouseY - scaleCentre.y, scl);
}
}
}

Top Reply