纯情小火鸡

用GWT处理用鼠标拖动图片的问题

纯情小火鸡 — Mon, 05 May 2008 16:13:29 +0800

作者: 纯情小火鸡链接：http://hyowner666.javaeye.com/blog/189780 发表时间: 2008年05月05日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

用的是GWT,做的是用鼠标拖拽图片让图片旋转的功能,用的是image.addMouseListener(new MouseListener(){});事件的方法,为什么当我按住鼠标在拖拽图片的时候当鼠标按钮松开后图片为什么还随着鼠标的移动而移动呢?(这时候是没按住按钮的情况),而我想要实现的是当按下鼠标按钮时拖动一点图片就转一下,而当松开按钮后图片也就停止在当前的状态,不会动(旋转)了,是不是GWT的鼠标事件不支持这种效果呢?
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

EXT 咨询些问题

纯情小火鸡 — Wed, 23 Apr 2008 09:51:23 +0800

作者: 纯情小火鸡链接：http://hyowner666.javaeye.com/blog/185724 发表时间: 2008年04月23日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

刚想接触EXT 请问下用EXT可以做地图方面的开发吗?我现在用的是Eclipse3.3.1+MyEclipse6.0.1+GWT Designer 我想要用EXT做地图这方面的需要装些什么呢?
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

用GWT做地图在给地图加标记时的疑问

纯情小火鸡 — Tue, 18 Mar 2008 15:29:39 +0800

作者: 纯情小火鸡链接：http://hyowner666.javaeye.com/blog/173414 发表时间: 2008年03月18日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

就是我最近用了GWT做地图,在做到加标记这个功能的时候遇到了很棘手的问题,就是我的地图是这样加载形成的:
mapGrid = new FlexTable();
mapGrid.setCellPadding(0);
mapGrid.setCellSpacing(0);

mapGrid.addTableListener(listener);

fillMapGrid();
viewArea.add(mapGrid);
fillMapGrid()方法如下:
public void fillMapGrid(){
for(int i = 0 ;i < 8 ; i++){
for(int j = 0 ;j < 13 ; j++){
/**
* 将地图（图片）上的默认浏览器行为除去。
*/
Image image = new Image(){
/**
* 这个部分必须紧跟在实例化过程的后面，不然就不起作用，没有在官方文档里找到原因。
*/
public void onBrowserEvent (Event event)
{
DOM.eventPreventDefault(event);
super.onBrowserEvent(event);
}

};
image.setUrl("images/2/2_" + i + "_" + j + ".JPG");

image.setPixelSize(256, 256); //图像块的大小
mapGrid.setWidget(i, j, image); }
}
}
这个方法是加载组成地图的方法,就这样的现在我做了一个按钮(添加标记的按钮) 当点击的时候能在地图上加个标记(标记是个.gif的图片),现在我用GWT中的PopupPanel方法在指定点(取的相素x,y)加了一个标记,但是当我在移动地图的时候标记还是在那个位置并没有随地图的移动而移动,这是什么原因呢?在正常的情况下在地图上加了个标记后是会随地图的移动而移动的,这是什么原因呢?
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

如何在做的地图上加标记以及放大缩小地图

纯情小火鸡 — Mon, 03 Mar 2008 16:11:31 +0800

作者: 纯情小火鸡链接：http://hyowner666.javaeye.com/blog/166981 发表时间: 2008年03月03日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

我用GWT做了个简单的地图是用image做的这样
public void fillMapGridmin(){

for(int i = 0 ;i < 1 ; i++){
for(int j = 0 ;j < 1 ; j++){
/**
* 将地图（图片）上的默认浏览器行为除去。
*/
Image image = new Image(){
/**
* 这个部分必须紧跟在实例化过程的后面，不然就不起作用，没有在官方文档里找到原因。
*/
public void onBrowserEvent (Event event)
{
DOM.eventPreventDefault(event);
super.onBrowserEvent(event);
}

};

image.setUrl("images/min/1_" + i + "_" + j + ".JPG");
image.setPixelSize(256, 256); //图像块的大小
mapGridmin.setWidget(i, j, image);
centerLeft = (int) ((areaWidth - this.imageWidth) * showPositionLeftRatio);
centerTop = (int) ((areaHeight - this.imageHeight) * showPositionTopRatio);
}
}
}
用这种方式建的,现在就是我如何在地图上加标记和实现它的放大缩小功能呢?????请教
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

用GWT做地图

纯情小火鸡 — Wed, 13 Feb 2008 16:19:45 +0800

作者: 纯情小火鸡链接：http://hyowner666.javaeye.com/blog/162081 发表时间: 2008年02月13日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

我们现在就是需要用GWT来做一个类似于googleMap那样的地图,因为以前没接触过GWT,现在我想做的是如何把已经切割好的地图图片动态的加载到页面中去?用GWT这个框架来做该如何去做呢?
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

GWT做地图

纯情小火鸡 — Wed, 13 Feb 2008 15:55:57 +0800

作者: 纯情小火鸡链接：http://hyowner666.javaeye.com/blog/162075 发表时间: 2008年02月13日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

我们现在就是需要用GWT来做一个类似于googleMap那样的地图,因为以前没接触过GWT,现在我想做的是如何把已经切割好的地图图片动态的加载到页面中去?
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

模仿Google Maps的MapViewer

纯情小火鸡 — Wed, 30 Jan 2008 11:02:52 +0800

作者: 纯情小火鸡链接：http://hyowner666.javaeye.com/blog/160327 发表时间: 2008年01月30日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

sheva.wen 写道

下面要写的东西是一个使用GWT编写的在有限区域内通过拖动查看整个地图的简单实现。

一些细节：

为什么能拖？
com.google.gwt.user.client.ui.MouseListener 通过实现这个接口，可以实现UI对象对鼠标的Enter,Down,Leave,Move,Up动作的支持。
com.google.gwt.user.client.ui.FocusPanel 并不是每个UI对象都能够实现MouseListener接口的，可以通过添加到FocusPanel来实现。
怎么才能显示地图的局部，或者说怎么把其他部分藏起来？

通过样式：
java 代码
DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");

DOM.setStyleAttribute(viewPortArea.getElement(), "position","relative");
设置显示区域的"overflow"属性为"hidden"及"position"属性为"relative"，图片可以实现局部显示显示框内。

代码：

java 代码
package cn.gov.imwb.client;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FocusPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.Widget;

/**
* @author sheva.wen
*
*/
public class MapViewerPanel extends Composite {
    public int areaHeight;

    public int areaWidth;

    public int centerLeft;

    public int centerTop;

    public int imageHeight;

    public String imageUrl;

    public int imageWidth;

    public int maxLeft;

    public int maxTop;

    public int minLeft;

    public int minTop;

    private Image image;

    private FocusPanel mouseListenerContainer;

    public double showPositionLeftRatio;

    public double showPositionTopRatio;

    private int startLeft;

    private int startTop;

    private int startX;

    private int startY;

    private int state = 0;//用于判断当前用户的鼠标动作

    private AbsolutePanel viewArea;

    private AbsolutePanel viewPortArea = new AbsolutePanel();

    /**
     *
     * @param areaWidth 显示区域的宽
     * @param areaHeight 显示区域的高
     * @param imageUrl 地图的链接
     * @param imageWidth 地图的宽
     * @param imageHeight 地图的高
     * @param showPositionLeftRatio 地图初始显示的位置最左占宽度的比例
     * @param showPositionTopRatio 地图初始显示的位置最上占宽度的比例
     */
    public MapViewerPanel(int areaWidth, int areaHeight, String imageUrl,
            int imageWidth, int imageHeight, double showPositionLeftRatio,
            double showPositionTopRatio) {
        mouseListenerContainer = new FocusPanel(viewPortArea);
        viewArea = new AbsolutePanel();
        /**
         * 将地图（图片）上的默认浏览器行为除去。
         */
        image = new Image(){
            /**
             * 这个部分必须紧跟在实例化过程的后面，不然就不起作用，没有在官方文档里找到原因。
             */
                 public void onBrowserEvent (Event event)
                 {
                     DOM.eventPreventDefault(event);
                     super.onBrowserEvent(event);
                 }

        };
        viewArea.add(image);
        image.setPixelSize(imageWidth, imageHeight);
        image.setUrl(imageUrl);

        viewPortArea.setPixelSize(areaWidth, areaHeight);
        viewPortArea.addStyleName("viewportViewer");
        DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");

        DOM.setStyleAttribute(viewPortArea.getElement(), "position",
                        "relative");
        initWidget(mouseListenerContainer);



        this.showPositionLeftRatio = showPositionLeftRatio;
        this.showPositionTopRatio = showPositionTopRatio;
        this.areaWidth = areaWidth;
        this.areaHeight = areaHeight;
        this.imageUrl = imageUrl;
        this.imageWidth = imageWidth;
        this.imageHeight = imageHeight;

        /**
         * 设置图片可被拖放的极限，防止图片被拖出边界
         */

        maxLeft = imageWidth - areaWidth;
        maxTop = imageHeight - areaHeight;
        minLeft = -(imageWidth - areaWidth);
        minTop = -(imageHeight - areaHeight);

        /**
         * 地图初始应该在的位置
         */
        centerLeft = (int) ((areaWidth - imageWidth) * showPositionLeftRatio);
        centerTop = (int) ((areaHeight - imageHeight) * showPositionTopRatio);

        viewPortArea.add(viewArea, centerLeft, centerTop);
        /**
         * 鼠标拖放的行为
         */
        MouseListener listener = new MouseListener(){

            public void onMouseDown(Widget sender, int x, int y) {
                state = 1;
                startX = x;
                startY = y;
                startLeft = viewPortArea.getWidgetLeft(viewArea);
                startTop = viewPortArea.getWidgetTop(viewArea);

            }

            public void onMouseEnter(Widget sender) {

            }

            public void onMouseLeave(Widget sender) {
                state = 0;
                DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");
            }

            public void onMouseMove(Widget sender, int x, int y) {
                if(state == 1){
                    DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "move");
                    if(viewPortArea.getWidgetLeft(viewArea) >= minLeft
                            && viewPortArea.getWidgetLeft(viewArea) <= maxLeft
                            && viewPortArea.getWidgetTop(viewArea) >= minTop
                            && viewPortArea.getWidgetTop(viewArea) <= maxTop){
                        viewPortArea.setWidgetPosition(viewArea,startLeft + (x - startX), startTop + (y - startY));
                    }
                }
            }

            public void onMouseUp(Widget sender, int x, int y) {
                // TODO 缺报当拖放结束时，地图还在显示框内
                if(viewPortArea.getWidgetLeft(viewArea) < minLeft){
                    viewPortArea.setWidgetPosition(viewArea, minLeft, viewPortArea.getWidgetTop(viewArea));
                }
                if(viewPortArea.getWidgetTop(viewArea) < minTop){
                    viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), minTop);
                }
                if(viewPortArea.getWidgetLeft(viewArea) > 0){
                    viewPortArea.setWidgetPosition(viewArea, 0, viewPortArea.getWidgetTop(viewArea));
                }
                if(viewPortArea.getWidgetTop(viewArea) > 0){
                    viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), 0);
                }
                state = 0;
                DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");
            }

        };
        mouseListenerContainer.addMouseListener(listener);

    }

}
代码很容易理解，这只是一个很简易的实现，至少还有以下需要完善：
地图分块载入
支持鼠标滚轮的缩放
“鹰眼”功能。
感兴趣的跟进一下：)

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐