MapEasy开发体会(二)――平滑移动

    前段时间一直在搞装修,没时间完成MAPEASY的开发体会系列,近段时间我会尽量抽时间.

这次讲MAPEASY平滑移动设计.

    ToolsWidget类设计就是用来完成基本工具栏的绘制.绘制方法为paint

     this .paint = function () {
   // go up
   var HTMLCode = '<table border= "0" cellspacing= "0" cellpadding= "1" ><tr><td align= "center" colspan= "3" ><img style= "cursor:pointer" src= "' + imgBaseDir + 'icon_goup.gif" onclick= "command.exec(\'goup\', ' + this.model.getId() + ');" ></td...........................;
   var toolbar = $( "toolbar_" + this .model.getId());
  toolbar.innerHTML = HTMLCode;

    }

    基本工具栏中的每一个事件都会响应一个command.exec();

    这里我先简单讲一下几个关键要用到的类和方法.可能会有些难懂,但这个是关键,MAPEASY中的大部分功能基本走的都是这个流程.

 

command.exec是干什么的

1.command 类实际上是监听器ListenerSupport类的一个代理类,它继承于ListenerSupport类.command里有一句ListenerSupport.apply(this);js继承的方式有很多种,我简单介绍两种 apply和call.这两种方式都可以实现类似于我们在c#或java中的继承(虽然原理不一样).不同的是apply的第二个参数可以是一个参数数组.

2. 此监听器的大部分方法并不需要外界访问.所以这时我们只需要用代理类command的exec方法来代理监听器ListenerSupport的firePropertyChange方法.而不用考虑它的内部结构.

3. 这个command类和其它的接口类不一样的地方就是它只代理其中的一个方法.

4.exec方法的第一个参数是action,类型是string.第二个参数可以是个array,也可以是单个的string.

 

MoveAction类是干什么的

1.MoveAction类用来响应基本工具栏中的平移动作.

2.由于Command对象继承于监听器ListenerSupport,并且在Command对象中实例化了一个对象command,所以在MoveAction类的构造函数中,利用command.addListener("goup", this);方法我们就可以向监听器注册事件以待响应动作.

3.当触发command.exec方法时, 监听器启动,根据exec方法的第一个参数action(这里的action是'goup')找到它的注册类中的propertyChange方法.  

 

SmoothMoveAction类是干什么的

1.它跟MoveAction类的结构和功能都一样,不同的是实现的效果不一样,一个平移,一个平滑

2.smoothMoveAction方法通过递归,循环控制移动距离,这个实现思路就象QQ的工具条.

 

    下面我们来做一个平滑移动的功能.

第一步:新建一个叫SmoothMoveAction.js的文件到action文件夹.  

 

添加代码为

/**
* 地图移动
*/
function SmoothMoveAction(mapModel) {
  
     // inherit from BaseAction
    BaseAction.apply( this, new Array(mapModel));

     //~ Method
     /**
  * 构造函数
  */
    {
   // 注册 Command 对象的监听器
  command.addListener( "goup", this);
  command.addListener( "godown", this);
  command.addListener( "goleft", this);
  command.addListener( "goright", this);
    }
  
     this.propertyChange = function(param, newValue) {
  smoothMoveAction(param, newValue);
    }

}

this.smoothMoveStep = 20;
this.smoothMoveTimes = 10;
  
function smoothMoveAction(param, newValue) { 
     this.smoothMoveTarget = $( "map_" + newValue);
     if (param) {
   if (param == "goup") {
       this.smoothMoveTarget.style.top = (getOffset( this.smoothMoveTarget.style.top) + this.smoothMoveStep) + "px";
  }
   if (param == "godown") {
       this.smoothMoveTarget.style.top = (getOffset( this.smoothMoveTarget.style.top) - this.smoothMoveStep) + "px";
  }
   if (param == "goleft") {
       this.smoothMoveTarget.style.left = (getOffset( this.smoothMoveTarget.style.left) + this.smoothMoveStep) + "px";
  }
   if (param == "goright") {
       this.smoothMoveTarget.style.left = (getOffset( this.smoothMoveTarget.style.left) - this.smoothMoveStep) + "px";
  }
   if ( this.smoothMoveTimes == 0) {
       this.smoothMoveTimes = 10;
      clearTimeout( this.smoothMoveThread);
  } else {
       this.smoothMoveTimes--;
       this.smoothMoveThread = setTimeout( "smoothMoveAction('"+param+ "','"+newValue+ "')", 10);
  }
    }
}

 

第二步:MapBuilder.js文件中添加

include(baseDir + "/map/action/SmoothMoveAction.js");

 

 

 

第三步:MapBuilder.js文件中添加

new SmoothMoveAction(this.mapModel);

 

 

最后一步:注释掉MoveAction类中构造函数中对事件监听的注册,不然等于向监听器注册了两次了.这样当点击移动键时就不会响应到MoveAction类中的propertyChange,因为监听器找不到它.

 

 

 

附件是测试例子,很成功!