Zooming an image

64 views
Skip to first unread message

pityug...@gmail.com

unread,
Oct 12, 2007, 4:48:24 AM10/12/07
to Google Web Toolkit
Hello is it Possible with GWT to Zoom an image???
If is ... then pls help me...

THX

Peter Blazejewicz

unread,
Oct 12, 2007, 4:34:43 PM10/12/07
to Google Web Toolkit
hi,
there is no general implementation, I believe there is as much
solutions as people writing code,
here one written quickly which simply scale image tag on stage:

package com.mycompany.project.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.LoadListener;
import com.google.gwt.user.client.ui.MouseWheelListener;
import com.google.gwt.user.client.ui.MouseWheelVelocity;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class ImageViewer implements EntryPoint, MouseWheelListener,
LoadListener {
private Image image;

public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
image = new Image();
rootPanel.add(image);
DOM.setStyleAttribute(image.getElement(), "position", "absolute");
DOM.setStyleAttribute(image.getElement(), "left", "50%");
DOM.setStyleAttribute(image.getElement(), "top", "50%");
image.addLoadListener(this);
image
.setUrl("http://farm3.static.flickr.com/
2249/1501777897_a6a05f21c7.jpg?v=0");
}

public void onMouseWheel(final Widget sender,
final MouseWheelVelocity velocity) {
int w = image.getWidth();
int h = image.getHeight();
if (velocity.isNorth()) {
w += 10;
h += 10;
} else {
w -= 10;
h -= 10;

}
image.setPixelSize(w, h);
DOM.setStyleAttribute(image.getElement(), "marginLeft", -(image
.getWidth() / 2)
+ "px");
DOM.setStyleAttribute(image.getElement(), "marginTop", -(image
.getHeight() / 2)
+ "px");
DOM.setStyleAttribute(image.getElement(), "left", "50%");
DOM.setStyleAttribute(image.getElement(), "top", "50%");
}

public void onError(Widget sender) {
// TODO Auto-generated method stub

}

public void onLoad(Widget sender) {
image.addMouseWheelListener(this);
int w = (image.getWidth() / 2) >> 0;
int h = (image.getHeight() / 2) >> 0;
DOM.setStyleAttribute(image.getElement(), "marginLeft", (-(w / 2))
+ "px");
DOM.setStyleAttribute(image.getElement(), "marginTop", (-(h / 2))
+ "px");
image.setPixelSize(w, h);
image.setVisible(true);
}
}


the other solutions are possible (just search net for image zoom
javascript), The wonderfull effeects which do not requrie any code but
plain CSS are possible on Safari 3/WebKit using image as border for
simple div tag,

regards,
Peter

On Oct 12, 10:48 am, "pityugonza...@gmail.com"

Reply all
Reply to author
Forward
0 new messages