VML

 

/* 简单vml操作，用于连线 2011-1-20

注意事项：1.页面上 xmlns:v="urn:schemas-microsoft-com:vml"
    <?import namespace="v" implementation="#default#VML" ?>
    <style>
     v\:line, v\:rect, v\:imagedata,v:group
     {
      display: inline-block;
     }
    </style>
    <v:group id="group1" style="position: relative; height:768px; width:1024px;"   coordsize="1024,768"></v:group>
    */
var VmlHelper = function (leftAdjust, topAdjust, leftEndAdjust, topEndAdjust, strokecolor, strokeweight, endarrow) {  
 this.leftAdjust = leftAdjust; 
 this.topAdjust = topAdjust; 
 this.leftEndAdjust = leftEndAdjust; 
 this.topEndAdjust = topEndAdjust; 
 if (strokecolor) {
  this.strokecolor = strokecolor;
 } else { this.strokecolor = "red"; };

 if (strokeweight) {
  this.strokeweight = strokeweight;
 } else { this.strokeweight = "1pt"; };
 if (endarrow) {
  this.endarrow = endarrow;
 } else { this.endarrow = "Classic"; };
}
VmlHelper.prototype = {
 GenLineOneByOne: function (args) {
  var le;
  var x1 = 0;
  var y1 = 0;
  var x2 = 0;
  var y2 = 0;

  for (var i = 0; i < arguments.length - 1; i++) {
   le = document.createElement("<v:line ><v:line/>");
   x1 = $("#" + arguments[i]).offset().left + ($("#" + arguments[i]).width() / 2) + this.leftAdjust;
   y1 = $("#" + arguments[i]).offset().top + ($("#" + arguments[i]).height()) + this.topAdjust;
   x2 = $("#" + arguments[i + 1]).offset().left + ($("#" + arguments[i + 1]).width() / 2) + this.leftEndAdjust;
   y2 = $("#" + arguments[i + 1]).offset().top + this.topEndAdjust;
   le.from = x1 + "," + y1;
   le.to = x2 + "," + y2;
   le.strokecolor = this.strokecolor;
   le.strokeweight = this.strokeweight;
   le.stroke.endarrow = this.endarrow;
   group1.insertBefore(le)

  } //for-End
 },  //prototype-GenLineOneByOne-end

 GenLineOneToManyH: function (args) { //一对多的水平方向
  var line1 = document.createElement("<v:line > <v:line/>"); //顶部到横线
  var arg1 = arguments[0];
  var xFrom = $("#" + arg1).offset().left + ($("#" + arg1).width() / 2) + this.leftAdjust; //from
  var yFrom = $("#" + arg1).offset().top + ($("#" + arg1).height()) + this.topAdjust; //from
  var arg2 = arguments[1];
  var x2 = $("#" + arg2).offset().left + ($("#" + arg2).width() / 2) + this.leftAdjust;
  var y2 = $("#" + arg2).offset().top + this.topEndAdjust;
  var yMid = yFrom + ((y2 - yFrom) / 2)//中线距离
  line1.from = xFrom + "," + yFrom;
  line1.to = xFrom + "," + yMid;
  line1.strokecolor = this.strokecolor; ;
  line1.strokeweight = this.strokeweight;
  line1.stroke.endarrow = this.endarrow;
  group1.insertBefore(line1);

  var line2 = document.createElement("<v:line > <v:line/>"); //横线
  var argLast = arguments[arguments.length - 1];
  var xLast = $("#" + argLast).offset().left + ($("#" + argLast).width() / 2) + this.leftAdjust;
  line2.strokecolor = "red";
  line2.strokeweight = "1pt";
  line2.from = x2 + "," + yMid;
  line2.to = xLast + "," + yMid;
  group1.insertBefore(line2)

  var lineV;
  var x1 = 0;
  var x2 = 0;
  var y2 = 0;
  for (var i = 1; i < arguments.length; i++) {
   lineV = document.createElement("<v:line > <v:line/>"); //纵向
   lineV.strokecolor = this.strokecolor;
   lineV.strokeweight = this.strokeweight;
   lineV.stroke.endarrow = this.endarrow;
   x1 = $("#" + arguments[i]).offset().left + ($("#" + argLast).width() / 2) + this.leftAdjust;
   x2 = $("#" + arguments[i]).offset().left + ($("#" + argLast).width() / 2) + this.leftAdjust;
   y2 = $("#" + arguments[i]).offset().top + this.topEndAdjust;
   lineV.from = x1 + "," + yMid;
   lineV.to = x2 + "," + y2;
   group1.insertBefore(lineV)
  } //for-end
 }, //GenLineOneToManyH-end
 GenLineOneToManyV: function (args) {//垂直方向一对多

  var arg1, argLast;
  arg1 = arguments[0];
  argLast = arguments[arguments.length - 1]
  var xFrom, yFrom;
  xFrom = $("#" + arg1).offset().left + ($("#" + arg1).width() / 2) + this.leftAdjust;
  yFrom = $("#" + arg1).offset().top + $("#" + arg1).height() + this.topAdjust;

  var xLast, yLast;
  xLast = $("#" + argLast).offset().left + this.leftEndAdjust;
  yLast = $("#" + argLast).offset().top + ($("#" + argLast).height() / 2) + this.topEndAdjust
  var polyLine = document.createElement("<v:PolyLine> <v:PolyLine>");
  polyLine.points.value = xFrom + "," + yFrom + " " + xFrom + "," + yLast + " " + xLast + "," + yLast;
  polyLine.strokecolor = this.strokecolor;
  polyLine.strokeweight = this.strokeweight;
  polyLine.stroke.endarrow = this.endarrow;
  polyLine.fillColor = "#F0F0F0";
  group1.insertBefore(polyLine);

  var lineH;
  var xH;
  var yH;
  for (var i = 1; i < arguments.length - 1; i++) {
   lineH = document.createElement("<v:line > <v:line/>");
   lineH.strokecolor = this.strokecolor;
   lineH.strokeweight = this.strokeweight;
   lineH.stroke.endarrow = this.endarrow;
   xH = $("#" + arguments[i]).offset().left + this.leftEndAdjust;
   yH = $("#" + arguments[i]).offset().top + ($("#" + arguments[i]).height() / 2) + this.topEndAdjust;
   lineH.from = xFrom + "," + yH;
   lineH.to = xH + "," + yH;
   group1.insertBefore(lineH);
  }

 }, //GenLineOneToManyV-end

 GenPolyLine: function (e1, e2, shap) {
  var xFrom, yFrom, xEnd, yEnd;
  var xM1, yM1, xM2, yM2;

  var polyLine = document.createElement("<v:PolyLine> <v:PolyLine>");
  polyLine.strokecolor = this.strokecolor;
  polyLine.strokeweight = this.strokeweight;
  polyLine.stroke.endarrow = this.endarrow;
  polyLine.fillColor = "#F0F0F0";
 
  xFrom = $("#" + e1).offset().left + ($("#" + e1).width() / 2) + this.leftAdjust;
  yFrom = $("#" + e1).offset().top + $("#" + e1).height() + this.topAdjust;
  xEnd = $("#" + e2).offset().left + ($("#" + e2).width() / 2) + this.leftAdjust;
  yEnd = $("#" + e2).offset().top + this.topEndAdjust;

 

  switch (shap) {
   case "L":
    break;
   case "Z":
    xM1 = xFrom;
    xM2 = xEnd;
    yM1 = (yFrom + ((yEnd - yFrom) / 2));
    yM2 = (yFrom + ((yEnd - yFrom) / 2));
    polyLine.points.value = xFrom + "," + yFrom + " " + xM1 + "," + yM1 + " " + xM2 + "," + yM2 + " " + xEnd + "," + yEnd;
    group1.insertBefore(polyLine);
    break;
   default:
    break;

  }

 } //GenPolyLine-end
}//prototype-end