Re: Zoom relative to mouse position



In article <J4BYj.9256$nl7.3109@xxxxxxxxxxxxxxxxxxxx>,
Amir Kouchekinia <amir_nospam@xxxxxxxxxxxxxxx> wrote:

Hi John,

Thank you very much for your reply.

I have tried your code, and the behavior is not what I am looking for.

The red rectangle in my code was located at 100,100 point in the initial
view (Scale 1.0, No Translate). I am not sure why you have centered the
rectangle to the 0,0 point. Also, where ever I try to zoom, the red
rectangle ends up being centered around that point.

Correct. The rectangle starts out centered on the origin of a Cartesian
plane (user space). As the graphics environment's default transformation
matrix is unchanged, the rectangle is rendered upright on the screen
(device space) and centered on the origin (left, upper corner).
Translating it to the current mouse point leaves it centered on the
mouse point, scaled according to the mouse wheel. Try altering the
original rectangle from (-15, -30, 30, 60) to (-15, -5, 30, 60) to see
how the rectangle remains upright (due to the g2's default transform)
and how it is positioned (due to the tx transform).

This is the behavior I want to see: When I place the mouse pointer over
the lower-left corner of the rectangle and zoom, I want the lower-left
corner of the rectangle to remain at the original mouse pointer location
relative to the screen. Now if I move the mouse pointer to the
upper-left corner of the rectangle and zoom, I want the upper-left
corner of the rectangle to remain at the new mouse pointer location
relative to the screen. If there where other shapes on the canvas, I'd
expect similar behavior when the mouse pointer is located over one of
those other shapes.

Only the shape under the mouse changes, and the other shapes remain
unaffected? You'll have to implement MouseMotionListener, determine
which object includes the mouse point, and scale/translate the
individual rectangle relative to the current mouse position.

I have found an example of this behavior on my Mac OSX 10.5 desktop:
If I hold the 'control' key and use the mouse wheel to zoom in, the
point in the object displayed under the mouse pointer stays under the
mouse pointer relative to the screen.

In this case, the entire Desktop zooms (with the wheel) and pans (with
the mouse). Let's start with the zoom. Such an effect is most easily
achieved by concatenating transformations with the g2's default
transform. Of course, this zooms the entire view, not just a single
object as you suggest above. Compare the order of concatenation in
following example to the previous one. The rotate is superfluous, but
interesting to alter.

Panning is left as an exercise with MouseMotionListener. Hint: Instead
of translating to the center of the window (as shown below), you'd
translate in a direction determined by the difference between successive
mouse positions.

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Shape;
import java.awt.event.MouseWheelEvent;
import java.awt.event.MouseWheelListener;
import java.awt.geom.AffineTransform;
import java.awt.geom.Rectangle2D;
import javax.swing.JFrame;
import javax.swing.JPanel;

@SuppressWarnings("serial")
public class ViewZoom extends JPanel {

private static final int SIZE = 500;
private double scale = 2d;
Rectangle2D.Double rect1 = new Rectangle2D.Double(-25, -35, 20, 30);
Rectangle2D.Double rect2 = new Rectangle2D.Double(5, 5, 30, 50);
Rectangle2D.Double rect3 = new Rectangle2D.Double(-15, -15, 30, 30);

public ViewZoom() {
this.addMouseWheelListener(new ZoomHandler());
}

@Override
public void paint(Graphics g) {
super.paint(g);
Graphics2D g2 = (Graphics2D) g;
g2.setColor(Color.BLACK);
g2.drawLine(0, SIZE / 2, SIZE, SIZE / 2);
g2.drawLine(SIZE / 2, 0, SIZE / 2, SIZE);
AffineTransform saveAT = g2.getTransform();
g2.translate(SIZE / 2, SIZE / 2);
g2.rotate(Math.PI / 4);
g2.scale(scale, scale);
g2.setColor(Color.RED);
g2.draw(rect1);
g2.draw(rect2);
g2.setColor(Color.BLUE);
g2.draw(rect3);
g2.setTransform(saveAT);
}

private class ZoomHandler implements MouseWheelListener {

public void mouseWheelMoved(MouseWheelEvent e) {
if (e.getScrollType() == MouseWheelEvent.WHEEL_UNIT_SCROLL) {

scale += (.1 * e.getWheelRotation());
scale = Math.max(0.1, scale);
scale = Math.min(scale, 10);

ViewZoom.this.revalidate();
ViewZoom.this.repaint();
}
}
}

public static void main(String[] args) {

JFrame f = new JFrame("ViewZoom");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
ViewZoom viewZoom = new ViewZoom();
f.getContentPane().add(viewZoom);
f.setSize(SIZE, SIZE);
f.setLocationRelativeTo(null);
f.setVisible(true);
}
}

John
--
John B. Matthews
trashgod at gmail dot com
home dot woh dot rr dot com slash jbmatthews
.



Relevant Pages

  • My custom control has issues
    ... I posted a thread a couple of weeks back titled "I need to zoom a bitmap ... Ultimately I have written a new control using ... to using GDI to drawing my rubber-band selection. ... when I draw the final selection rectangle I get a black box, ...
    (microsoft.public.dotnet.framework.drawing)
  • Re: Zoom relative to mouse position
    ... The red rectangle in my code was located at 100,100 point in the initial ... Also, where ever I try to zoom, the red ... This is the behavior I want to see: When I place the mouse pointer over ...
    (comp.lang.java.programmer)
  • Re: My custom control has issues
    ... Ultimately I have written a new control using pieces of zoompicbox as a skeleton and it's working pretty well, but there are some problems. ... This control is called PixelViewer and that's its purpose: to view an image and let you zoom in and see the pixels as pixels, not a smoothed image. ... Since GDI+ doesn't allow for XOR drawing, I've resorted to using GDI to drawing my rubber-band selection. ... That part works fine, but when I draw the final selection rectangle I get a black box, not inverted colors. ...
    (microsoft.public.dotnet.framework.drawing)
  • Re: PowerPoint 2007 changed the way zoom works in same cases
    ... Go to an extreme of the rectangle and zoom that tip edge by 400. ... - A slide with a lot of different shapes everywhere ... I'm seeing the same "feature" in PPT 2003 though. ...
    (microsoft.public.powerpoint)
  • Re: PowerPoint 2007 changed the way zoom works in same cases
    ... Go to an extreme of the rectangle and zoom that tip edge by 400. ... - A slide with a lot of different shapes everywhere ... I'm seeing the same "feature" in PPT 2003 though. ...
    (microsoft.public.powerpoint)