Zooming in on an image

Hi all,
I'm playing around some with ClipView to drag and zoom in on an image (like in Google Maps). ClipView supports the panning, but not the zooming. So, I've added a zoom binding on scaleX and scaleY on my ImageView, like this:
    // Enable zooming
    scaleX: bind zoom;
    scaleY: bind zoom;
    onMouseWheelMoved: function( e: MouseEvent ):Void {
        // Zoom on scroll
        zoom += -e.wheelRotation / 10
    }The problem now is that if I open a high-resolution image and it at first is showed at a lower resolution (to fit inside my window), it won't show the better quality when I zoom but instead it only zooms on the current view, making the image pixly and not zooming in on the original image to show the better quality. I guess this is due to that the original view of the image is cached (and hence not replaced by the better resolution that the original image has after I zoom).
Any clues on how to achieve this?

Solved:
I happened to forget that I had specified an initial size of the Image, smaller than than original image =)

Similar Messages

Jquery zoom plugin that shows images above the zoomed image on mouse rollover

Hi all, after much effort and help from this forum I've managed to get a zoom effect to work on my image. It needed to be a loupe effect like this - http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming. aspx
This is the plugin I've used.
Problem now is that I need images to appear above the image on mouse rollover. Currently - if I place images above this image and place my cursor over the image the zoom effect works but it ignores the images placed on top and just zooms in on the image shown below.
I would be very appreciative of anyone who can help me with this issue.
Thanks.
I wondered if it was possible to stop the jquery zoom plugin working when I mouseover the image on top of the map. Maybe that would be a solution?

> the image I have above the roll over I have just
> inserted shows the image that should be shown when I
roll over the image I
> have
> just inserted
url address please. words will not work for this.
random guess- check that the name and/or ID of every item on
the page is
unique.
Alan
Adobe Community Expert, dreamweaver
http://www.adobe.com/communities/experts/

Zoom into high resolution image

Hi,
Before starting to learn Muse, I've one big need: zooming into high-resolution images.
I want to show how high the resolution is by letting the viewer zoom in with a loupe (or just scrolling with mouse wheel). I'm not talking about of a slideshow through some crops of the main image, but of an shrink- or grow effect of the image.
Is this possible to achieve?
Thanks for your insight,
Dominique

Could this be the solution, you are looking for?
https://creative.adobe.com/addons/products/2406#.U8Jp1mIaySM

Pan | Zoom: how to get image offsets when panning

Hello,
I am trying to use the Pan | Zoom control to show images, allowing zoom and pan. I haven't found yet a way to infer the X,Y offset of the part of the image that it's displayed in the imageviewer visible rectangle. I need these details in order to print objects and markers at the right place over the image.
Is there some hidden or simple way to get these informations?
Thanks,
Mario

Hello,
I am trying to use the Pan | Zoom control to show images, allowing zoom and pan. I haven't found yet a way to infer the X,Y offset of the part of the image that it's displayed in the imageviewer visible rectangle. I need these details in order to print objects and markers at the right place over the image.
Is there some hidden or simple way to get these informations?
Thanks,
Mario

HI Please Help me with Zoom of a buffered image

Hi All,
Please help,
I want to zoom the buffered image using Affine Transforms, the code shown below can rotate the buffered image now how to zoom the same buffered image using Affine Transforms.
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
public class RotationBounds extends JPanel implements ActionListener
    BufferedImage image;
    AffineTransform at = new AffineTransform();
    Rectangle2D.Double bounds = new Rectangle2D.Double();
    double theta = 0;
    double thetaInc = Math.PI / 2;
    public void actionPerformed(ActionEvent e)
        theta += thetaInc;
        setTransform();
        repaint();
    private void setTransform()
        int iw = image.getWidth();
        int ih = image.getHeight();
        double cos = Math.abs(Math.cos(theta));
        double sin = Math.abs(Math.sin(theta));
        double width = iw * cos + ih * sin;
        double height = ih * cos + iw * sin;
        double x = (getWidth() - iw) / 2;
        double y = (getHeight() - ih) / 2;
        at.setToTranslation(x, y);
        at.rotate(theta, iw / 2.0, ih / 2.0);
        x = (getWidth() - width) / 2;
        y = (getHeight() - height) / 2;
        // Set bounding rectangle that will frame the image rotated
        // with this transform. Use this width and height to make a
        // new BuffferedImage that will hold this rotated image.
        // AffineTransformOp doesn't have this size information in
        // the translation/rotation transform it receives.
        bounds.setFrame(x - 1, y - 1, width + 1, height + 1);
    protected void paintComponent(Graphics g)
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;
        setBackground(Color.gray);
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
            RenderingHints.VALUE_ANTIALIAS_ON);
        if (image == null)
            initImage();
        g2.drawRenderedImage(image, at);
        // g2.setPaint(Color.blue);
        g2.draw(bounds);
        g2.setPaint(Color.green.darker());
        g2.fill(new Ellipse2D.Double(getWidth() / 2 - 2,
            getHeight() / 2 - 2, 4, 4));
    private void initImage()
        int w = 360, h = 300;
        image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = image.createGraphics();
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
            RenderingHints.VALUE_ANTIALIAS_ON);
        g2.setPaint(new Color(220, 240, 240));
        g2.fillRect(0, 0, w, h);
        g2.setPaint(Color.red);
        g2.drawString("Text for test", 50, 50);
        g2.drawRect(0, 0, w - 1, h - 1);
        g2.dispose();
        g2.setTransform(at);
//        setTransform();
    private JPanel getLast()
        JButton rotateButton = new JButton("Rotate");
        rotateButton.addActionListener(this);
         JButton zoomButton = new JButton("Zoom");
        JPanel panel = new JPanel();
        panel.add(rotateButton);
        panel.add(zoomButton);
        return panel;
    public static void main(String[] args)
        RotationBounds test = new RotationBounds();
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(test);
        f.getContentPane().add(test.getLast(), "North");
        f.setSize(400, 400);
        f.setLocation(0, 0);
        f.setVisible(true);
}Message was edited by:
New_to_Java

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.BufferedImage;
import java.util.Hashtable;
import javax.swing.*;
import javax.swing.event.*;
public class RotationZoom extends JPanel {
    AffineTransform at = new AffineTransform();
    Point2D.Double imageLoc = new Point2D.Double(100.0, 50.0);
    Rectangle2D.Double bounds = new Rectangle2D.Double();
    BufferedImage image;
    double theta = 0;
    double scale = 1.0;
    final int PAD = 20;
    public RotationZoom() {
        initImage();
    public void addNotify() {
        super.addNotify();
        setTransform();
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                            RenderingHints.VALUE_INTERPOLATION_BICUBIC);
        g2.drawRenderedImage(image, at);
        g2.setPaint(Color.red);
        g2.draw(bounds);
    public Dimension getPreferredSize() {
        return new Dimension((int)(imageLoc.x + Math.ceil(bounds.width)) + PAD,
                             (int)(imageLoc.y + Math.ceil(bounds.height)) + PAD);
    private void update() {
        setTransform();
        revalidate();
        repaint();
    private void setTransform() {
        int iw = image.getWidth();
        int ih = image.getHeight();
        double cos = Math.abs(Math.cos(theta));
        double sin = Math.abs(Math.sin(theta));
        double width = iw*cos + ih*sin;
        double height = ih*cos + iw*sin;
        at.setToTranslation(imageLoc.x, imageLoc.y);
        at.rotate(theta, scale*iw/2.0, scale*ih/2.0);
        at.scale(scale, scale);
        double x = imageLoc.x - scale*(width - iw)/2.0;
        double y = imageLoc.y - scale*(height - ih)/2.0;
        bounds.setFrame(x, y, scale*width, scale*height);
    private void initImage() {
        int w = 240, h = 180;
        int type = BufferedImage.TYPE_INT_RGB;
        image = new BufferedImage(w,h,type);
        Graphics2D g2 = image.createGraphics();
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        g2.setBackground(new Color(220,220,240));
        g2.clearRect(0,0,w,h);
        g2.setPaint(Color.red);
        g2.draw(new CubicCurve2D.Double(0, h, w*4/3.0, h/4.0,
                                        -w/3.0, h/4.0, w, h));
        g2.setPaint(Color.green.darker());
        g2.draw(new Rectangle2D.Double(w/3.0, h/3.0, w/3.0, h/3.0));
        g2.dispose();
    private JPanel getControls() {
        JSlider rotateSlider = new JSlider(-180, 180, 0);
        rotateSlider.setMajorTickSpacing(30);
        rotateSlider.setMinorTickSpacing(10);
        rotateSlider.setPaintTicks(true);
        rotateSlider.setPaintLabels(true);
        rotateSlider.addChangeListener(new ChangeListener() {
            public void stateChanged(ChangeEvent e) {
                int value = ((JSlider)e.getSource()).getValue();
                theta = Math.toRadians(value);
                update();
        rotateSlider.setBorder(BorderFactory.createTitledBorder("theta"));
        int min = 50, max = 200, inc = 25;
        JSlider zoomSlider = new JSlider(min, max, 100);
        zoomSlider.setMajorTickSpacing(inc);
        zoomSlider.setMinorTickSpacing(5);
        zoomSlider.setPaintTicks(true);
        zoomSlider.setLabelTable(getLabelTable(min, max, inc));
        zoomSlider.setPaintLabels(true);
        zoomSlider.addChangeListener(new ChangeListener() {
            public void stateChanged(ChangeEvent e) {
                int value = ((JSlider)e.getSource()).getValue();
                scale = value/100.0;
                update();
        zoomSlider.setBorder(BorderFactory.createTitledBorder("scale"));
        JPanel panel = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.weightx = 1.0;
        gbc.fill = GridBagConstraints.HORIZONTAL;
        gbc.gridwidth = GridBagConstraints.REMAINDER;
        panel.add(rotateSlider, gbc);
        panel.add(zoomSlider, gbc);
        return panel;
    private Hashtable getLabelTable(int min, int max, int inc) {
        Hashtable<Integer,JComponent> table = new Hashtable<Integer,JComponent>();
        for(int j = min; j <= max; j += inc) {
            JLabel label = new JLabel(String.format("%.2f", j/100.0));
            table.put(new Integer(j), label);
        return table;
    public static void main(String[] args) {
        RotationZoom test = new RotationZoom();
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(new JScrollPane(test));
        f.getContentPane().add(test.getControls(), "Last");
        f.setSize(500,500);
        f.setLocation(200,100);
        f.setVisible(true);
}

Zoom in/out into images

Hi mates ,
wanted to know if there is a method for zooming in/out to images or ill just have to implement it myself ?

lshaibin,
Use Graphics2D scale method in the paint method of your class that extends JPanel class.
example:
public void paint(Graphics g)
Graphics2D g2 = (Graphics2D)g;
// If you want some quality
g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_BICUBIC);
g2.scale(zoom,zoom);
g2.drawImage(image,0,0,null);
g2.dispose();
}

What script for Zoom in/ out of image?

1. I plan to import quite bigger bitmap image and save as a
Graphic Symbol
2. Make some Botton Symbols for +(Zoom in, -(Zoom out) and
Reset.
3. If I click +(Zoom in) button, image (reduced sized image
in smaller window) got magnified.
----> What scripts do I need for this design? I'm working
on Flash8.
Thanks much in advance!!
*** I got this idea from the site of
http://www.metmuseum.org/explore/cezannes_apples/look.html
And click "Let's Look Closely"...

First of all, dont put your image as a graphic symbol ... use
movieClip instead.
Lets say you transform it into a movieClip and give it the
instance "image" and that your zoom button is called zoomBtn and
the un-zoom button is called unZoomBtn:
//--> start the loop for zooming in on "press" event
zoomBtn.onPress = function(){
this.onEnterFrame = zoomIn;
//--> start the loop for zooming out on "press" event
unZoomBtn.onPress = function(){
this.onEnterFrame = zoomOut;
//--> stop the loop for zooming in or out on "release"
event of both buttons
zoomBtn.onRelease = unZoomBtn.onRelease = function(){
delete this.onEnterFrame;
//--> line of code executed in loop for the zoom in
function zoomIn(){
image._xscale = image._yscale += 5;
//--> line of code executed in loop for zoom out
function zoomOut(){
image._xscale = image._yscale -= 5;
}

Zoom and Pan of image

My objective is to be able to zoom in on an image and be able
to pan the image around within my stage.
Is there any tutorials that anyone knows of.
Thanks for your time

You can use ActionScript to create a mouse event to your
image (convert it to a movie clip) and when the user clicks on the
image, he can make the image bigger or smaller. It's not a real
zooming in but if the image gets bigger you do see more.
Is that what you are trying to achieve?

Zoom- after initial zoom I want the image to return to original size

After trying many different ways to zoom on one slide I have
broken each zoom (of a selected image) out into 8 slides. I am
wondering though... if I select the zoom to only last a few
seconds, why does it continue to be 'zoomed' even after that time
alloted has past?

Hi bfair76 and welcome to our community
Notice that the Zoom feature is typically configured for
displaying the zoomed area for the slide duration. But you can
easily change this. For example, I had a slide timed for 3 seconds.
I inserted a zoom area and it zoomed for 1.5 seconds and stayed on
the slide until the slide time ended at 3 seconds. I then increased
the slide time to 5 seconds and the zoom followed suit. If you
double-click the zoom object and click the Options tab, you may
easily change the "Display for" area from "rest of slide" to
"specific time", then configure the duration as desired.
Hopefully this was helpful to you... Rick

Upscaled images look blurry, is there a way to sharpen them? In particular, zooming on pages with images that actually contain only text are hard to read.

I am zooming in on my homework in mastering physics. I am using a large screen and sitting far away. It uses a lot of images containing the text I need to read, but when the images are upscaled, they become very blurry and hard to read. A simple sharpen effect after it is resized would fix the problem. Is there a way to do this in firefox? like a command line switch or maybe something in about:config? Thanks

It may sound counter-intuitive, but could you try disabling graphics hardware acceleration? Since this feature was added to Firefox, it has gradually improved, but there still are a few glitches.
You usually need to restart Firefox in order for this to take effect, so save all work first (e.g., mail you are composing, online documents you're editing, etc.).
orange Firefox button ''or'' classic Tools menu > Options > Advanced
On the "General" mini-tab, uncheck the box for "Use hardware acceleration when available"
If you restart Firefox, is the issue resolved?

HTML5 Zoom Are Shows Wrong Image

Hi All,
I have a Captivate 6 Project that is being published ot HTML5. Some of the Zoom areas zoom into what that area looks like later. In other words, I wan to zoom into a menu, instead it sooms into an image that shows later in the slide. The same Zoom works fine or swf output.
Has anyone else noticed this?
TIA - Vijay

Hello,
I'm using Mac OS X Mountain Lion. Here are some screen shots in order:
In the shot below, right in the center of the screen is the word Baseline:
Here is the same slide with the Zoom Area:
And here is later in the same slide where the "Zoomed" image is coming from part of another object which appears later in the timeline:
Thanks much for your help - Vijay

How to retain zoom position of an image using Adobe Flash Builder?

Hi,
I have created an Adobe Flash Builder Mobile App. I placed an image in the Homeview. I allow the user to zoom out or zoom in the image using GestureZoom.
The problem is each time the user zooms, it does not retain the previous position.
For ex., If I have a map image, I zoom the Bangalore area. After the zoom, I don't see the Bangalore area in the visible portion of the device screen.
Can anyone help me in this? I feel this is a very basic requirement of zoom but I am missing something really.
I have seen few samples of this requirement in Adobe Flash which does not work for mobile apps.

I don't understand what you mean, but to give you a sample file so you can see what I am talking about:
link to fla file: http://dl.dropbox.com/u/48932382/Untitled-1.fla
link to swf file: http://dl.dropbox.com/u/48932382/Untitled-1.swf
As you can see in this file, I am turning the green page, but when you should be seeing behind the page, it's actually transparent and you end up seeing the page underneath it.
Here is a picture of it: (if your wondering, the pages have the same text, it's just the color of the pages are different)

PS CS5.1 - Changes/additions to doc don't appear until I zoom in/out of image

Good evening,
Over the past few weeks I've encountered a problem with Photoshop CS 5.1. Anytime I make an addition or alteration to an image (not a photo, but a digital composition) whatever I've done does not appear until I zoom in or out of the image. I have also tried waiting a few seconds to see if the program just lagged but it still doesn't appear until I zoom in or out. An example would be if I add text to a document, while I'm typing the cursor will move as I type but the text doesn't appear until I zoom. This is with solid text and of a color differing from the background.
I tried increasing the memory available to the program (I have given it about 6gb), still occurs. I uninstalled and reinstalled the program, problem persists.
I'm running Windows 7 64bit, Intel i7 1.6ghz, 8 gb of memory
Any possible solutions would be very helpful. I've resorted to using CS2 and I would love to move back to CS5.
Thanks

Hi there! Because the forum you originally posted in is for beginners trying to learn the basics of Photoshop, I moved your question to the Photoshop General Discussion forum, where you'll get more specialized help.

Zooming in on tif images gives fuzzy results

Hi,
Using 3.2 lightroom, when I zoom in on a tif image it is fuzzy. If I click on the next image over, then click back it reloads and is sharp.
Is there a way to force a reload without clicking to another image and then back.
When doing same on a raw file (NEF in my case) I do not have this problem.
Thanks
Gary

Gary,
It's a bug that crops up for some people. You've found a workaround.
You probably ought to upgrade to the latest release: 3.5 It's free for you, and contains several bug fixes over the 3.2 that you're running. Perhaps it will solve your problem.
Hal

How do I get the default zooming to not include images or how can I resize everything but actual images?

I have a problem with the default zooming in firefox Using default layout.css.devPixelsPerPx=-1 or layout.css.devPixelsPerPx=1.5 makes all UI and webpage text look nice and readable, spacing is fine and everything. The only problem is that images are ALSO zoomed which is ridiculous. I guess I would like a way to scale everything BUT images. I have a hi-resolution monitor and think it's silly to have to zoom out every image on a web page just because I wanted text and the UI enlarged. I tried NoSquint using 65% for pages and 150% for text only, but that had the issue of making ONLY text scaled up and not spacing and other stuff (google searches looked even more silly using only 6 cm to the left, rows too close overwrote themselves etc.)

That is not possible.
The layout.css.devPixelsPerPx pref affects everything in Firefox, both the user interface and the browsing area.
'Full page zoom' affects all elements on web pages including images and 'zoom text only' affects the text and can cause issues with text overlapping or disappearing similar to setting a minimum font size because the containing element keeps the same dimensions.
You can't just exclude the images from zoom and have the containers expand automatically.

Zooming in on an image

Similar Messages

Maybe you are looking for