svg兑现星座图的绘制

svg实现星座图的绘制
也就是java的散点图，之前用jfreechart实现了一个，效果不理想，后来采用svg实现，还不错
不多说了直接上代码


svg文件

<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY ns_svg "http://www.w3.org/2000/svg"><!ENTITY ns_xlink "http://www.w3.org/1999/xlink">]><svg width = "100%" height="100%"><script xlink:href="../../js/monitor.js"></script><rect x="0" y="0" id="rect1" width = "520" height="520" fill="black" stroke="white" stroke-width="0"></rect></svg>

monitor.js

var point = null;var beginpoint = null;var endpoint = null;var SVGDoc;var currentMode = 0;var beginpointx = 0;var beginpointy = 0;var endpointx = 0;var endpointy = 0;var svgns = "http://www.w3.org/2000/svg";var xlinkns = "http://www.w3.org/1999/xlink";var svgDocument;var svgRoot;var parentwin;var evt;function initgis(evt) {evt = evt;svgDocument = evt.target.ownerDocument;svgRoot = svgDocument.documentElement;parentwin = window.parent;}//绘制点的方法function CreatePoint(svgDoc,pointx, pointy, id) {svgDocument = svgDoc;var svgns = "http://www.w3.org/2000/svg";var x = pointx;var y = pointy;var shape3 = svgDocument.createElementNS(svgns, "rect");shape3.setAttributeNS(null, "id", id);shape3.setAttributeNS(null, "x", x);shape3.setAttributeNS(null, "y", y);shape3.setAttributeNS(null, "width", "1");shape3.setAttributeNS(null, "height", "1");shape3.setAttributeNS(null, "fill", "green");svgDocument.documentElement.appendChild(shape3);}function RemovePoint(svgDoc,id) {svgDocument = svgDoc;var root = svgDocument.getRootElement();var vid = root.getElementById(id);if (vid != null) {root.removeChild(vid);}}

jsp中相关代码

function GainConstellationGraphSVG(cardid,channel){         var url = "<%=basePath%>ajax/GainConstellationGraphSVG.action?Rnd="+Math.random()+"&cardid="+cardid+"&channel="+channel;             if(ajaxSvg){             ajaxSvg.open("get", url, true);         ajaxSvg.onreadystatechange = ConstellationGraphSVG;        ajaxSvg.send(null);         }        }  function ConstellationGraphSVG(){        if (ajaxSvg.readyState == 4)        {            if (ajaxSvg.status == 200)            {            var msg = ajaxSvg.responseText;               if (msg != "") {                           var list = msg.split('|');                           for (var i in list) {var point = list[i].split(',');svgWin = SVGGraph.window;        svgDoc = SVGGraph.getSVGDocument();svgWin.RemovePoint(svgDoc,point[2]);}for (var key in list) {var point = list[key].split(',');svgWin = SVGGraph.window;        svgDoc = SVGGraph.getSVGDocument();svgWin.CreatePoint(svgDoc,point[0], point[1],point[2]);}                        }else{                        ///alert("星座图加载失败！");                            //return;                        }            }          }        }<embed id="SVGGraph" name="SVGGraph" src="rect.svg" width="520" height="520" type="image/svg+xml" wmode="transparent"/>

没秒钟从后台获取到坐标数据，一共16*64个点，绘制点的时候定义了该点的ID，每次重新绘制点都会把之前的点给移除掉，相当于更新星座图。
svgWin = SVGGraph.window; 
svgDoc = SVGGraph.getSVGDocument();
这两个参数是关键点，第一个是获取jsp页面的星座图对象，第二个是获取SVG文档的DOM(文档对象模型)

效果图

查看更多 下一篇