Is there a way to zoom on a GWT image on a certain spot. Like on Google Maps. If you scroll on the part where your mouse pointer is, the image will zoom in that spot. Thank you very much!
This does the trick. Based on this JS response . Full source code here .
EventType.bind(document, wheel, new EventCallbackFn<WheelEvent>() {
double[] pos = {0, 0};
double scale = 1;
@Override
public void onEvent(WheelEvent ev) {
ev.preventDefault();
// cap the delta to [-1,1] for cross browser consistency
double delta = Math.max(-1, Math.min(1, ev.deltaY / 200.));
// determine the point on where the img is zoomed in
double[] zoomTarget = {(ev.pageX - pos[0]) / scale, (ev.pageY - pos[1]) / scale};
// calculate zoom and x and y based on it
scale = Math.max(.1, Math.min(10, scale + delta * scale));
pos[0] = -zoomTarget[0] * scale + ev.pageX;
pos[1] = -zoomTarget[1] * scale + ev.pageY;
target.style.transform = "translate(" + pos[0] + "px ," + pos[1] + "px) scale(" + scale + ")";
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.