AJAX的奇妙

时间：2008-05-16 来源：剑心通明

我一直在想，怎么样在网页中实现一个能画流程图并且保存的功能？无意中让我发现了DOM这本书，也让我真正了解了
[url=javascript:;]HTML[/url]
也可以动太玩转得如此神奇。
一开始我自己想从零开始，自己写出一个javascript的图形库，但在Google里找了一下，却发现了一个实现了的javascript图形库 (http://www.walterzorn.com/index.htm)。并且实现了在网页中的拖放功能。正好，这就是我想要的，所以一起下载下来，并用于一个应用中。那个拖放功能在不做修改的情况下只真对已经在网页中出现的图片和层。经过修改了部分
[url=javascript:;]代码[/url]
，可以实现画好一个图片(动态加入图片)后实现拖放功能。
我的实现如下：
// owner is a div
// A Show is a div
// A Show has a UUID as id
// A Show is a jsGraphics() object
function Show(owner, src, x, y, w, h, re) {
      this._class = "SHOW";
      this.owner = owner;
      this.jg = new jsGraphics(owner);

      this.src = src;
      this.innerHTML = null;
      this.resize = true;
      this.showed = false;
      this.painted= false;

      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
      this.paint = function() {
         if(this.jg!=null && !this.painted) {
            this.id = (new UUID()).toString()+"dIi15v";
            if(!this.resize) {
                  this.id = this._class + this.id
            } else {
                  this.id = this._class + "RESIZE" + this.id;
            }
            this.img= this.id + 'NI1m6G';

            this.innerHTML = this.jg.drawImage(this.src, this.id, this.x, this.y, this.w, this.h);
            this.jg.paint();
            ADD_DHTML(this.getId());
            this.showed = true;
            this.painted= true;
         }
      };
      this.show = function() {
         if(this.jg!=null && !this.showed) {
            var _div = document.getElementById(this.id);
            var _style = _div.getAttribute("style");
            if(_style != null) {
                  if(_style.indexOf("visibility") >= 0) {
                     _style = _style.replace("hidden", "visible");
                  } else {
                     _style += "visibility:visible;";
                  }
            } else {

            }
            _div.setAttribute("style", _style);
            this.showed = true;
         }
      };
      this.hide = function() {
         if(this.jg!=null && this.showed) {
            var _div = document.getElementById(this.id);
            var _style = _div.getAttribute("style");
            if(_style != null) {
                  if(_style.indexOf("visibility") >= 0) {
                     _style = _style.replace("visible", "hidden");
                  } else {
                     _style += "visibility:hidden;";
                  }
            } else {

            }
            _div.setAttribute("style", _style);
            this.showed = false;
         }
      };
      this.clear = function() {
         if(this.jg!=null && this.showed){
            this.jg.clear();
            this.showed = false;
            this.painted= false;
         }
      };
      this.flash = function() {
         if(this.jg != null) {
            this.jg.clear();
            this.jg.show();
         }
      };
      this.getOwner = function() {
         return this.owner;
      };
      this.setOwner = function(o) {
         if(o != null) {
            this.x = this.getX();
            this.y = this.getY();
            this.w = this.getW();
            this.h = this.getH();
            this.owner = o;
            this.clear();
            this.jg = new jsGraphics(this.owner);
            this.paint();
         }
      };
      this.getId = function() {
         return this.id;
      }
      this.getDiv = function() {
         return document.getElementById(this.id);
      }

      this.getX = function() {
         var _img = document.getElementById(this.img);
         var _style = _img.getAttribute("style");
         if(_style == null) {
            var _div = document.getElementById(this.id);
            _style = _div.getAttribute("style");
            _style = _style.substring(_style.indexOf("left:")+5);
            var _tmp = _style.substring(0, _style.indexOf(";")-2);
            return this.x = _tmp;
         }
         return 0;
      }

      this.getY = function() {
         var _img = document.getElementById(this.img);
         var _style = _img.getAttribute("style");
         if(_style == null) {
            var _div = document.getElementById(this.id);
            _style = _div.getAttribute("style");
            _style = _style.substring(_style.indexOf("top:")+4);
            var _tmp = _style.substring(0, _style.indexOf(";")-2);
            return this.y = _tmp;
         }
         return 0;
      }

      this.getW = function() {
         var _img = document.getElementById(this.img);
         var _style = _img.getAttribute("style");
         if(_style == null) {
            var _div = document.getElementById(this.id);
            _style = _div.getAttribute("style");
            _style = _style.substring(_style.indexOf("width:")+6);
            var _tmp = _style.substring(0, _style.indexOf(";")-2);
            return this.w = _tmp;
         }
         return 0;
      }

      this.getH = function() {
         var _img = document.getElementById(this.img);
         var _style = _img.getAttribute("style");
         if(_style == null) {
            var _div = document.getElementById(this.id);
            _style = _div.getAttribute("style");
            _style = _style.substring(_style.indexOf("
            var _tmp = _style.substring(0, _style.indexOf(";")-2);
            return this.h = _tmp;
         }
         return 0;
      }
}
var s = new Show(dd.elements.panel.div, "img/ddcham.jpg", 10, 10);
var ss = new Show(dd.elements.panel.div, "img/ddcham.jpg", 100, 100);
var sss;
function testShow() {
      s.show();
}
function testHide() {
      s.hide();
}
function testPaint() {
      s.paint();
      ss.paint();
      sss = new Show(s.getDiv(), "img/upleft.gif", 20, 20);
      sss.paint();
}

function testClear() {
      s.clear();
}

function testMove() {
      sss.setOwner(ss.getDiv());
}

function testAttr() {
      alert("x:"+s.getX()+"y:"+s.getY()+"w:"+s.getW()+"h:"+s.getH());
}