在GWT中移动元素地图的ViewPort？ [英] Move ViewPort of Element Map in GWT?

问题描述

我有一个带有视口的GWT应用程序，它显示了一个元素映射的一部分。在元素映射上是div元素。用户可以在视口上拖动和移动（不在元素上）。如果用户在视口上拖动并移动，那么他可以将视口移动到所有方向。这意味着将显示元素贴图的另一部分。浏览器的浏览器位置保持不变，只有元素贴图会随着视图的拖动和移动而移动。

如何设置视口和元素映射使其拖动并移动就绪？

解决方案

通过使用方法 setWidgetPosition 。在视口中移动视图，更新它们的位置 -

  public class Viewport extends AbsolutePanel {
 private static final String DEFAULT_MOUSE_DOWN_CURSOR =moveCursor; 
 private static final String DEFAULT_MOUSE_DRAG_CURSOR =pointerCursor; 
 
 private final FocusPanel panel = new FocusPanel（）; 
 
 private String mouseDownCursor = DEFAULT_MOUSE_DOWN_CURSOR; 
 private String mouseDragCursor = DEFAULT_MOUSE_DRAG_CURSOR; 
 
私人小工具view = null; 
 
 private boolean dragging = false; 
 private int xOffset，yOffset; 
 
 private boolean eventPreviewAdded = false; 
 
 private EventPreview preventDefaultMouseEvents = new EventPreview（）{
 public boolean onEventPreview（Event event）{
 switch（DOM.eventGetType（event））{
 case事件.ONMOUSEDOWN：
 case Event.ONMOUSEMOVE：
 DOM.eventPreventDefault（event）; 
} 
返回true; 
} 
}; 
 
 public Viewport（）{
 add（panel）; 
 
 panel.addMouseListener（new MouseListenerAdapter（）{
 public void onMouseEnter（）{
 DOM.addEventPreview（preventDefaultMouseEvents）; 
} 
 
 public void onMouseLeave（）{
 DOM.removeEventPreview（preventDefaultMouseEvents）; 
} 
 $ b $ public void onMouseDown（Widget widget，int x，int y）{
 dragging = true; 
 
 xOffset = x; 
 yOffset = y; 
 
 DOM.setCapture（panel.getElement（））; 
} 
 
 public void onMouseMove（Widget widget，int x，int y）{
 if（dragging）{
 removeStyleName（mouseDownCursor）; 
 addStyleName（mouseDragCursor）; 
 
 int newX = x + getWidgetLeft（panel） -  xOffset; 
 int newY = y + getWidgetTop（panel） -  yOffset; 
 
 setWidgetPosition（panel，newX，newY）; 
} 
} 
 
 public void onMouseUp（Widget widget，int x，int y）{
 if（dragging）{
 dragging = false; 
 removeStyleName（mouseDownCursor）; 
 removeStyleName（mouseDragCursor）; 
 
 DOM.releaseCapture（panel.getElement（））; 
} 
} 
}）; 
} 
 
 public String getMouseDownCursor（）{
 return mouseDownCursor; 
} 
 
 public void setMouseDownCursor（String mouseDownCursor）{
 this.mouseDownCursor = mouseDownCursor; 
} 
 
 public String getMouseDragCursor（）{
 return mouseDragCursor; 
} 
 
 public void setMouseDragCursor（String mouseDragCursor）{
 this.mouseDragCursor = mouseDragCursor; 
} 
 
 public Widget getView（）{
 return view; 
} 
 
 public void setView（Widget view）{
 this.view = view; 
 panel.setWidget（view）; 
 
 
  

请参阅 Google Web Toolkit解决方案：更酷，有用的东西

---

更多示例 -

• 解决方案4。视口和地图


• http://www.salvin.in /


• GWT Canvas演示

请看这本书，我向你推荐。有一步一步的指示你想要做什么。

I have a GWT application with a viewport that shows a part of an element map. On the element map are div elements. The user can drag and move on the viewport (not on the elements). If the user drag and move on the viewport than he can move the viewport to all directions. This means that another part of the element map will be displayed. The browser position of the viewport remains unchanged, only the element map moves on drap and move of the viewport.

How do I have to setup the viewport and the element map to make it drag and move ready?

解决方案

Place the widget by using method setWidgetPosition. To move a views within the viewport, updated them position -

public class Viewport extends AbsolutePanel {
  private static final String DEFAULT_MOUSE_DOWN_CURSOR = "moveCursor";
  private static final String DEFAULT_MOUSE_DRAG_CURSOR = "pointerCursor";

  private final FocusPanel panel = new FocusPanel();

  private String mouseDownCursor = DEFAULT_MOUSE_DOWN_CURSOR;
  private String mouseDragCursor = DEFAULT_MOUSE_DRAG_CURSOR;

  private Widget view = null;

  private boolean dragging = false;
  private int xOffset, yOffset;

  private boolean eventPreviewAdded = false;

  private static EventPreview preventDefaultMouseEvents = new EventPreview() {
      public boolean onEventPreview(Event event) {
        switch (DOM.eventGetType(event)) {
           case Event.ONMOUSEDOWN:
           case Event.ONMOUSEMOVE:
             DOM.eventPreventDefault(event);
        }
        return true;
      }
    };

  public Viewport() {
    add(panel);

    panel.addMouseListener(new MouseListenerAdapter() {
      public void onMouseEnter() {
       DOM.addEventPreview(preventDefaultMouseEvents);
      }

      public void onMouseLeave() {
       DOM.removeEventPreview(preventDefaultMouseEvents);
      }

      public void onMouseDown(Widget widget, int x, int y) {
        dragging = true;

        xOffset = x;
        yOffset = y;

        DOM.setCapture(panel.getElement());
      }

      public void onMouseMove(Widget widget, int x, int y) {
        if (dragging) {
          removeStyleName(mouseDownCursor);
          addStyleName(mouseDragCursor);

          int newX = x + getWidgetLeft(panel) - xOffset;
          int newY = y + getWidgetTop(panel) - yOffset;

          setWidgetPosition(panel, newX, newY);
        }
      }

      public void onMouseUp(Widget widget, int x, int y) {
        if (dragging) {
          dragging = false;
          removeStyleName(mouseDownCursor);
          removeStyleName(mouseDragCursor);

          DOM.releaseCapture(panel.getElement());
        }
      }
    });
  }

  public String getMouseDownCursor() {
    return mouseDownCursor;
  }

  public void setMouseDownCursor(String mouseDownCursor) {
    this.mouseDownCursor = mouseDownCursor;
  }

  public String getMouseDragCursor() {
    return mouseDragCursor;
  }

  public void setMouseDragCursor(String mouseDragCursor) {
   this.mouseDragCursor  = mouseDragCursor;
  }

 public Widget getView() {
  return view;
 }

 public void setView(Widget view) {
   this.view = view;
   panel.setWidget(view);
 }
}

See Google Web Toolkit Solutions: More Cool & Useful Stuff

---

More examples -

• Solution 4. Viewports and Maps
• http://www.salvin.in/
• GWT Canvas Demo

Look at this book, which I recommend to you. There are step by step instructions for what you want to do.

这篇关于在GWT中移动元素地图的ViewPort？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！