时间戳

首页 > 解决方案 > 在 GWT 上的某个位置缩放图像

java - 在 GWT 上的某个位置缩放图像

问题描述

有没有办法在某个位置放大 GWT 图像。就像在谷歌地图上一样。如果您滚动鼠标指针所在的部分，图像将放大该位置。非常感谢！

标签： javagwtzoominggxt

解决方案

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 + ")";
    }
});

推荐阅读