Robert und einige andere benötigen eine Zeitleiste, die sich mit der Maus o.ä. scrollen lässt und in die man herein-zoomen kann. Dabei soll beim Zoomen der Zeitpunkt in der Fenstermitte fix bleiben, also die Zeitleiste gewissermassen um den aktuellen Punkt zentriert werden.
Hier zunächst der Beispielcode:
int numSteps = 30; // Anzahl der Schritte
float stepSize = 30; // Abstand der Schritte
float xPos; // Position der Zeitleiste
float winX; // Position der Ausrichtung im Fenster
float lastMousePos;
void setup() {
size( 400, 400 );
PFont fnt = createFont( "Arial", 8 );
textFont( fnt );
fill( 255 );
stroke( 255, 30 );
winX = width / 2; // Ausrichtung an Fenstermitte
xPos = -(stepSize * numSteps)/2;
}
void draw() {
background( 0);
line( winX, 0, winX, height );
float startX = xPos + winX;
for (int i = 0; i< numSteps; i++ ) {
float x = startX + i * stepSize;
text( i, x, 200 );
}
}
void mousePressed() {
lastMousePos = mouseX;
}
void mouseDragged() {
float offset = mouseX - lastMousePos; // Mausbewegung seit letztem Mal
xPos += offset; // Position korrigieren
lastMousePos = mouseX; // letzte Mausposition merken
}
void keyPressed() {
float anchor = xPos / (stepSize * numSteps); // Ankerpunkt merken
// Zoom-In und Out
if (key == CODED) {
if (keyCode == UP) {
stepSize += 2;
}
else if (keyCode == DOWN) {
stepSize -= 2;
}
}
xPos = anchor * (stepSize * numSteps); // an Ankerpunkt ausrichten
}
Die Variablen numSteps und stepSize definieren Anzahl und Abstand der Skala (z.B. Striche oder Zahlen). xPos gibt die Position der Zeitleiste an und winX der Punkt, an dem die Zeitleiste ausgerichtet wird (in diesem Fall die Fenstermitte, markiert durch eine Linie).
In der draw() Funktion wird die Zeitleiste gezeichnet (in diesem Fall durch Ziffern). Zunächst wird die Anfangsposition (startX) berechnet und dann in einer Schleife die Positionen der Ziffern.
Wenn die Maus gedraggt wird, wird in mouseDragged() für jeden Frame berechnet, wie weit die Maus seit dem letzten Frame bewegt wurde (offset) und das zur Position (xPos) dazu addiert. Anschließend merken wir uns die letzte Mausposition.
in keyPressed liegt der eigentliche Trick: Wir berechnen die Position der Zeitleiste geteilt durch die Breite der Zeitleiste (stepSize * numSteps). Dieser Wert (anchor) gibt uns die relative Position der Zeitleiste, unabhängig von ihrer tatsächlichen Breite an. Nachdem wir dann die stepSize vergrößert oder verkleinert haben, berechnen wir anhand dieser relativen Position wieder die korrekte Position anhand der neuen Stepsize.