中文XML论坛 - 专业的XML技术讨论区--显示贴子

以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  造福大众！javascript完全控制svg的代码。  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=12092)

--  作者：rocmike
--  发布时间：11/15/2004 9:19:00 PM

--  造福大众！javascript完全控制svg的代码。
里面包含创建svg图形，修改svg图形，删除svg图形的全部代码，提供给大家参考参考，如果大家有更好的代码，请修改后，记得与我分享一下。

：）

mail:rocmike@163.com

--  作者：rocmike
--  发布时间：11/15/2004 9:22:00 PM

--
为不方便下载的同志，提代出源代码。如下：

test.html

<html>
<head>
  <title>test SVG</title>
  <script language="javascript" src="js/showsvg.js" type="text/javascript"></script>
  <script language="JavaScript">
  var svgDoc;
  var gnode;
  var arrUseValue;
  var arrUseYear;
  var useMinValue;
  var useMaxValue;
  var svgType = 3;
  var arrmyv = new Array('90','90','270','90','180','340');
  var arrperiod = new Array(2000,2001,2002,2003,2004,2005);

  var mynewwin = null;

  function init(event)
  {
    svgDoc = event.getTarget().getOwnerDocument();
    gnode = svgDoc.getElementById("gc");
    //update(arrmyv,70,70,40,40);
  }


  function refreshopenwin() {

    var arrmyv1 = new Array('100','40','270','90','180','340');
    var arrperiod1 = new Array(200,201,202,203,204,205);
    svgViewChange(arrmyv1,arrperiod1,svgType);
    mynewwin.location.reload();
  }
  </script>

</head>
<body>
     <embed id="showsvg" name="showsvg" type="image/svg+xml" src="littleimg.svg" width="300" height="200" />
     </br>
     <input type="button" name="drawpoly" value="draw poly" onclick="svgViewChange(arrmyv,arrperiod,1);"><br>
     <input type="button" name="clear" value="clear all" onclick="deleItem();"><br>
     <input type="button" name="drawrect" value="draw rectange" onclick="svgViewChange(arrmyv,arrperiod,2);"><br>
     <input type="button" name="addp" value="draw pie" onclick="svgViewChange(arrmyv,arrperiod,3);"><br>
     <input type="button" name="reload" value="refresh open window" onclick="refreshopenwin();">
     <input type="radio" name="R5" value="1" onClick="svgViewChange(arrmyv,arrperiod,1);" checked>折线图
              <input type="radio" name="R5" value="2" onClick="svgViewChange(arrmyv,arrperiod,2);">柱状图
              <input type="radio" name="R5" value="3" onClick="svgViewChange(arrmyv,arrperiod,3);">饼图
</body>
</html>

--  作者：rocmike
--  发布时间：11/15/2004 9:23:00 PM

--
littleimg.svg

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
  "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg id="mainid" onload="initsvg(evt)" onzoom="ZoomControl()" onclick="opennewwin();">
<script type="text/ecmascript"><![CDATA[
   function initsvg(evt)
   {
     try
     {
       init(evt);
     }
     catch(e) {};
   }

   ]]>
</script>
  <defs>
  <linearGradient id="grad001" gradientTransform="rotate(90)">
    <stop offset="0" stop-color="#CBFEFF"/>
    <stop offset="0.26" stop-color="#C4F1FF"/>
    <stop offset="0.764" stop-color="#A0A9FF"/>
    <stop offset="1" stop-color="#9999FF"/>
  </linearGradient>
    <style type="text/css">
      <![CDATA[
      line
      {
        stroke: #000;
        stroke-width: 1px
      }
      g text
      {
        font-family: Arial,Helvetica,sans-serif,SimSun;
        font-size: 9px;
        cursor:hand;
      }
      g rect
      {
        cursor:move;
      }
      rect
      {
        cursor:move;
      }
      ]]>
    </style>
  </defs>
  <a xlink:href="">
  <g id="imageBorder">
      <rect id="imageBorderRect" x="0" y="0" width="179" height="128" style="fill:url(#grad001);stroke:none"/>
  </g>
<g id="gc">
</g>
  <g id="tooltip">
    <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" style="visibility: hidden"/>
    <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text>
  </g>
  </a>
</svg>

--  作者：rocmike
--  发布时间：11/15/2004 9:24:00 PM

--
showsvg.js

var arrColors = ['red','green','blue','yellow','navy','gold','dodgerblue','navajowhite','mediumpurple'];

//数组排序函数,升序
function s(a,b) {
return a - b;
}
//排序函数用法
//array.sort(s);

//删除数组中的一个元素，参数dx表示该元素的index
Array.prototype.baoremove = function(dx)
{
if(isNaN(dx)||dx>this.length){return false;}
this.splice(dx,1);
}

//重新排列数组，去掉为空的值或者非正常的值
//参数是一个两维数组，第一维表示数值的数组，第二维表示年份的数组，
//两个子数组在排序前后均须保持一一对应关系
function resortArray() {
  //var tmparr1 = tmparr[0];
  //var tmparr2 = tmparr[1];
  var len = arrUseValue.length;
  var tmpi = 0;
  for(var i=0; i<len; i++) {
    if(isNaN(arrUseValue[tmpi])) {
      arrUseValue.baoremove(tmpi);
      arrUseYear.baoremove(tmpi);
      tmpi = (i > 0) ? i : 0;
      //tmparr1.baoremove(i);
      //tmparr2.baoremove(i);
    } else {
      tmpi = i + 1;
    }
  }
  //var retarr = new Array(tmparr1,tmparr2);
  //return retarr;
}

function getMaxValue(tmparr) {
  var maxValue = 0;
  for (var i=0; i<tmparr.length; i++) {
    var value = parseFloat(tmparr[i]);
    if (value > maxValue) maxValue = value;
  }
  maxValue = Math.ceil(maxValue);
  return maxValue;
}

function getMaxPeriod(tmparr) {
  var maxValue = 0;
  for (var i=0; i<tmparr.length; i++) {
    var value = tmparr[i][0];
    if (value > maxValue) maxValue = value;
  }
  return maxValue;
}

function getMinPeriod(tmparr) {
  var minPeriod = 3000;
  for (var i=0; i<tmparr.length; i++) {
    var value = tmparr[i][0];
    if (value < minPeriod) minPeriod = value;
  }
  return minPeriod;
}

//显示提示窗口
function ShowTooltip(mousemove_event,txt)
{
  //obj=mousemove_event.target.parentNode;
  //obj.style.setProperty("opacity","0.5");

  var ttrelem,tttelem,posx,posy,curtrans,ctx,cty;

ttrelem=svgDoc.getElementById("ttr");
tttelem=svgDoc.getElementById("ttt");

  posx=mousemove_event.clientX;
  posy=mousemove_event.clientY;
  tttelem.childNodes.item(0).data=txt;

  curtrans=svgDoc.documentElement.currentTranslate;
  ctx=curtrans.x;
  cty=curtrans.y;

  ttrelem.setAttribute("x",posx-ctx);
  ttrelem.setAttribute("y",posy-cty-20);
  tttelem.setAttribute("x",posx-ctx+5);
  tttelem.setAttribute("y",posy-cty-8);
  ttrelem.setAttribute("width",tttelem.getComputedTextLength()+30);
  tttelem.setAttribute("style","fill: #00C; font-size: 13px; visibility: visible");
  ttrelem.setAttribute("style","fill: #FFC; stroke: #000; stroke-width: 0.5px;\
    visibility: visible");
}
//隐藏提示窗口
function HideTooltip(mouseout_event)
{
  //obj=mouseout_event.target.parentNode;
  //obj.style.setProperty("opacity","1.0");

  var ttrelem,tttelem;

  ttrelem=svgDoc.getElementById("ttr");
  tttelem=svgDoc.getElementById("ttt");
  ttrelem.setAttribute("style","visibility: hidden");
  tttelem.setAttribute("style","visibility: hidden");
}
//窗口缩放
function ZoomControl()
{
  var curzoom;

  curzoom=svgDoc.documentElement.currentScale;
  svgDoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom+")");
}

//清除svg图像中的所有元素，便于重新画图
function deleItem() {
  //var gnode = svgDoc.getElementById("gc");
  while (gnode.getChildNodes().getLength() > 0) {
    gnode.removeChild(gnode.getFirstChild());
  }
}

//画折线图，第一个参数是数值数组，
//第二个参数是最小值，第三个参数是最大值
function drawPolyline(tmparr,tmpminv,tmpmaxv) {
  var vpoint = "";
  var t = tmparr.length;
  var addv = 152 / (t - 1);
  var vx = 20;
  var vy = 0;
  tmpdiv = (tmpmaxv - tmpminv) / 5;

  tmpmaxv = Math.ceil(tmpmaxv + tmpdiv);
  tmpminv = Math.floor(tmpminv - tmpdiv);

  for(var i=0;i<t;i++) {
    var txtcirc = arrUseYear[i] + ", " + tmparr[i];
    //确定x坐标
    vx = 20 + i * addv;
    vpoint += vx + ",";
    //确定y坐标
    //alert(tmparr[i]);
    vy = 120 - (tmparr[i] - tmpminv) / (tmpmaxv - tmpminv) * 120;
    vpoint += vy + ",";

    //添加小圆点
    var newcircle = svgDoc.createElement("circle");
    newcircle.setAttribute("cx",vx);
    newcircle.setAttribute("cy",vy);
    newcircle.setAttribute("r",2);
    newcircle.setAttribute("style","cursor:crosshair;fill:" + arrColors[i]);
    newcircle.setAttribute("onmouseover","ShowTooltip(evt,'" + txtcirc + "')" );
    newcircle.setAttribute("onmouseout","HideTooltip(evt)");
    gnode.appendChild(newcircle);
  }
  vpoint  = vpoint.substring(0,(vpoint.length - 1));
  //alert(vpoint);
  var newpoly = svgDoc.createElement("polyline");
  newpoly.setAttribute("points",vpoint);
  newpoly.setAttribute("style","fill: none; stroke: #00C; stroke-width: 1.5px");
  gnode.appendChild(newpoly);
}

//画柱状图，第一个参数是数值数组，
//第二个参数是最小值，第三个参数是最大值
function drawRectange(tmparr,tmpminv,tmpmaxv) {
  var vpoint = "";
  var t = tmparr.length;
  //var addv = 32.5;
  var addv = 130 / (t - 1);
  var vx = 27;
  var vy = 0;
  tmpdiv = (tmpmaxv - tmpminv) / 5;

  tmpmaxv = Math.ceil(tmpmaxv + tmpdiv);
  tmpminv = Math.floor(tmpminv - tmpdiv);

  for(var i=0;i<t;i++) {
    var txtrect = arrUseYear[i] + ", " + tmparr[i];
    //确定x坐标
    vx = 27 + i * addv;
    //确定y坐标
    vy = 120 - (tmparr[i] - tmpminv) / (tmpmaxv - tmpminv) * 120;
    var newrect = svgDoc.createElement("rect");
    newrect.setAttribute("x",vx);
    newrect.setAttribute("y",vy);
    newrect.setAttribute("width",15);
    newrect.setAttribute("height",(120 - vy));
    newrect.setAttribute("style","cursor:crosshair;fill:" + arrColors[i]);
    newrect.setAttribute("onmouseover","ShowTooltip(evt,'" + txtrect + "')" );
    newrect.setAttribute("onmouseout","HideTooltip(evt)");
    gnode.appendChild(newrect);
  }
}

//画饼图,第一个参数是数值数组，第二个参数是年份数组
function drawPie(tmparr1,tmparr2) {
    var basePointX     = 62.;
    var basePointY     = 65.;
    var currentX       = 0.0;
    var currentY       = 0.0;
    var offsetX1       = 0.0;
    var offsetY1       = 0.0;
    var offsetX2       = 0.0;
    var offsetY2       = 0.0;
    var radius         = 60.;
    var angleSum1      = 0.;
    var angleSum2      = 0.;
    var vertexCount    = tmparr1.length;
    var xPts           = Array(vertexCount);
    var yPts           = Array(vertexCount);
    var angles         = Array(vertexCount);
    var pointPath      = "";
    var colorCount     = arrColors.length;

    var pieNode        = null;
    var gcNode         = null;

    var dataSum = 0.;

    for(var v=0; v<vertexCount; v++)
    {
       dataSum += Math.abs(parseFloat(tmparr1[v]));
    }
    //alert(dataSum);
    for(var v=0; v<vertexCount; v++)
    {
       angles[v] = 360.*Math.abs(parseFloat(tmparr1[v]))/dataSum;
    }
    //alert(angles);
    gcNode = svgDoc.getElementById("gc");
    var txtstyle = "text-anchor:left;";
    for(var v=0; v<vertexCount; v++)
    {
       angleSum2 = angleSum1 + angles[v];
       var txtpv = parseInt(Math.abs(tmparr1[v])/dataSum *10000) / 100 + "%";

       offsetX1 = radius*Math.cos(angleSum1*Math.PI/180);
       offsetY1 = radius*Math.sin(angleSum1*Math.PI/180);
       offsetX2 = radius*Math.cos(angleSum2*Math.PI/180);
       offsetY2 = radius*Math.sin(angleSum2*Math.PI/180);

currentX = basePointX+offsetX2;
currentY = basePointY-offsetY2;

      // the vertical offset must be subtracted,
      // so we need to "flip" the sign of offsetY1
       offsetY1 *= -1;

       pointPath = "M"+basePointX+","+basePointY;
       pointPath += " l"+offsetX1+","+offsetY1;
       if(angles[v] < 180 ) {
         pointPath += " A"+radius+","+radius+" 0 0 0 ";
       } else {
         pointPath += " A"+radius+","+radius+" 0 1 0 ";
       }
       pointPath += currentX+","+currentY;
       pointPath += " L"+basePointX+","+
                        basePointY+"z";

fillColor = "fill:" + arrColors[v%colorCount];

       txtGnode = tmparr2[v] + "," + tmparr1[v] + "," + txtpv;
       //alert(txtGnode);
       var newg = svgDoc.createElement("g");
       //newg.addEventListener("mouseover",OpacityDown,true);
       //newg.addEventListener("mouseout",OpacityUp,true);
       newg.setAttribute("onmouseover","ShowTooltip(evt,'" + txtGnode + "')" );
       newg.setAttribute("onmouseout","HideTooltip(evt)");
       gcNode.appendChild(newg);

       pieNode = svgDoc.createElement("path");
       pieNode.setAttribute("d",    pointPath);
       pieNode.setAttribute("style",fillColor);
       newg.appendChild(pieNode);

       var recNode = svgDoc.createElement("rect");
       recNode.setAttribute("x",123);
       recNode.setAttribute("y",(10 + v*10));
       recNode.setAttribute("width",3);
       recNode.setAttribute("height",3);
       recNode.setAttribute("style",fillColor);
       newg.appendChild(recNode);

       var txtNode = svgDoc.createElement("text");
       txtNode.setAttribute("x",128);
       txtNode.setAttribute("y",(15 + v*10));
       txtst = txtstyle + fillColor;
       txtNode.setAttribute("style",txtst);
       newg.appendChild(txtNode);
       texte=svgDoc.createTextNode(tmparr2[v] + "[" + txtpv + "]");
       txtNode.appendChild(texte);

angleSum1 += angles[v];
}
}

//设定x轴坐标,画线及添加标题,参数是年份数组
function setXAxis(tmparr) {
  //画x轴线
  var newline = svgDoc.createElement("line");
  newline.setAttribute("x1",20);
  newline.setAttribute("y1",120);
  newline.setAttribute("x2",172);
  newline.setAttribute("y2",120);
  newline.setAttribute("style","stroke-width:2;stroke:blue");
  gnode.appendChild(newline);

  var t = tmparr.length - 1;
  var addv = 152 / t;
  var addt = 144 / t;
  var sumlv = 20;
  var sumtv = 17;
//画x轴的文字
  newtext = svgDoc.createElement("text");
  newtext.setAttribute("x",sumtv);
  newtext.setAttribute("y",127);
  gnode.appendChild(newtext);
  texte=svgDoc.createTextNode(tmparr[0]);
  newtext.appendChild(texte);
  for(var i=0;i<t;i++) {
    //画x轴的小短线
    sumlv = 20 + (i + 1) * addv;
    newline = svgDoc.createElement("line");
   newline.setAttribute("x1",sumlv);
   newline.setAttribute("y1",0);
   newline.setAttribute("x2",sumlv);
   newline.setAttribute("y2",120);
   newline.setAttribute("style","stroke-width:0.5;stroke:white");
   gnode.appendChild(newline);
   //画x轴的文字
   sumtv = 17 + (i + 1) * addt;
   newtext = svgDoc.createElement("text");
   newtext.setAttribute("x",sumtv);
   newtext.setAttribute("y",127);
   gnode.appendChild(newtext);
   texte=svgDoc.createTextNode(tmparr[i+1]);
    newtext.appendChild(texte);
  }
}

//设定y轴坐标,画线及添加标题,第一个参数是最小值，第二个参数是最大值
function setYAxis(tmpminv,tmpmaxv) {
  //画y轴线
  var newline = svgDoc.createElement("line");
  newline.setAttribute("x1",20);
  newline.setAttribute("y1",0);
  newline.setAttribute("x2",20);
  newline.setAttribute("y2",120);
  newline.setAttribute("style","stroke-width:2;stroke:blue");
  gnode.appendChild(newline);

  var addv = 24;
  var sumlv = 0;
  var sumtv = 4;

  tmpdiv = (tmpmaxv - tmpminv) / 5;
  tmpmaxv = Math.ceil(tmpmaxv + tmpdiv);
  tmpminv = Math.floor(tmpminv - tmpdiv);

//设定公司的名称
function setCompanyName(companyname) {
parent.all['svgtitle'].innerHTML = companyname;
}

//设定图象的标题,涉及到下拉框和标题栏的同时变动
function setGraphTitle(title) {
//
}

//点击动态改变图象的函数,第一个参数是数值数组，第二个参数是年份数组
//function svgViewChange(tmparr1,tmparr2) {
function svgViewChange(tmparr1,tmparr2,type) {
  arrUseValue = tmparr1;
  arrUseYear = tmparr2;
  //alert(arrUseValue);
  //alert(arrUseYear);
  resortArray();
  svgType = type;
  if(svgType == 1) {
    deleItem();
    useMinValue = getMinValue(arrUseValue);
    useMaxValue = getMaxValue(arrUseValue);
    setXAxis(arrUseYear);
    setYAxis(useMinValue,useMaxValue);
    drawPolyline(arrUseValue,useMinValue,useMaxValue);
  } else if(svgType == 2) {
    deleItem();
    useMinValue = getMinValue(arrUseValue);
    useMaxValue = getMaxValue(arrUseValue);
    setXAxis(arrUseYear);
    setYAxis(useMinValue,useMaxValue);
    drawRectange(arrUseValue,useMinValue,useMaxValue);
  } else if(svgType == 3) {
    deleItem();
    useMinValue = getMinValue(arrUseValue);
    useMaxValue = getMaxValue(arrUseValue);
    drawPie(arrUseValue,arrUseYear);
  }
}

function opennewwin() {
mynewwin = window.open ('bigimg.html', 'svgnewwindow', 'height=320, width=370, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no');
}

--  作者：rocmike
--  发布时间：11/15/2004 9:25:00 PM

--
bigimg.html

<html>
<head>
  <title>Big Image of SVG</title>
  <script language="javascript" src="js/showbigsvg.js" type="text/javascript"></script>
  <script language="JavaScript">
  var svgDoc;
  var gnode;
  var arrUseValue;
  var arrUseYear;
  var useMinValue;
  var useMaxValue;
  var svgType = opener.svgType;
  var arrUseValue = opener.arrUseValue;
  var arrUseYear = opener.arrUseYear;

  function init(event)
  {
    svgDoc = event.getTarget().getOwnerDocument();
    gnode = svgDoc.getElementById("gc");
    svgViewChange(arrUseValue,arrUseYear,svgType);

    if(arrUseValue.length > 0) {
     if(svgType == 1) {
       deleItem();
       useMinValue = getMinValue(arrUseValue);
       useMaxValue = getMaxValue(arrUseValue);
       setXAxis(arrUseYear);
       setYAxis(useMinValue,useMaxValue);
       drawPolyline(arrUseValue,useMinValue,useMaxValue);
     } else if(svgType == 2) {
       deleItem();
       useMinValue = getMinValue(arrUseValue);
       useMaxValue = getMaxValue(arrUseValue);
       setXAxis(arrUseYear);
       setYAxis(useMinValue,useMaxValue);
       drawRectange(arrUseValue,useMinValue,useMaxValue);
     } else if(svgType == 3) {
       deleItem();
       useMinValue = getMinValue(arrUseValue);
       useMaxValue = getMaxValue(arrUseValue);
       drawPie(arrUseValue,arrUseYear);
     }
   }

  }
  self.focus();
  </script>

</head>
<body>
     <embed id="showsvg" name="showsvg" type="image/svg+xml" src="largeimg.svg" width="358" height="256" />
     </br>
     <input type="radio" name="R5" value="1" onClick="svgViewChange(arrUseValue,arrUseYear,1);" checked>折线图
              <input type="radio" name="R5" value="2" onClick="svgViewChange(arrUseValue,arrUseYear,2);">柱状图
              <input type="radio" name="R5" value="3" onClick="svgViewChange(arrUseValue,arrUseYear,3);">饼图
</body>
</html>

--  作者：rocmike
--  发布时间：11/15/2004 9:26:00 PM

--
largeimg.svg

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
  "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg id="mainid" onload="initsvg(evt)" onzoom="ZoomControl()">
<script type="text/ecmascript"><![CDATA[
   function initsvg(evt)
   {
     try
     {
       init(evt);
     }
     catch(e) {};
   }

   ]]>
</script>
  <defs>
  <linearGradient id="grad001" gradientTransform="rotate(90)">
    <stop offset="0" stop-color="#CBFEFF"/>
    <stop offset="0.26" stop-color="#C4F1FF"/>
    <stop offset="0.764" stop-color="#A0A9FF"/>
    <stop offset="1" stop-color="#9999FF"/>
  </linearGradient>
    <style type="text/css">
      <![CDATA[
      line
      {
        stroke: #000;
        stroke-width: 1px
      }
      g text
      {
        font-family: Arial,Helvetica,sans-serif,SimSun;
        font-size: 11px;
        cursor:hand;
      }
      g rect
      {
        cursor:move;
      }
      rect
      {
        cursor:move;
      }
      ]]>
    </style>
  </defs>
  <a xlink:href="">
  <g id="imageBorder">
      <rect id="imageBorderRect" x="0" y="0" width="358" height="256" style="fill:url(#grad001);stroke:none"/>
  </g>
<g id="gc">
</g>
  <g id="tooltip">
    <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" style="visibility: hidden"/>
    <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text>
  </g>
  </a>
</svg>

--  作者：rocmike
--  发布时间：11/15/2004 9:27:00 PM

--
showbigsvg.js