[英]Zooming an image on GWT on a certain spot
Is there a way to zoom on a GWT image on a certain spot. 有没有一种方法可以在特定位置放大GWT图像。 Like on Google Maps.
就像在Google地图上一样。 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 .
基于此JS响应 。 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 + ")";
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.