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,因为监听器找不到它.

 

 

 

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

平滑移动例子