【svg+vml】部分尝试

最新推荐文章于 2025-09-07 22:29:54 发布

weixin_34233679

最新推荐文章于 2025-09-07 22:29:54 发布

阅读量126

点赞数

文章标签： javascript ViewUI

本文介绍了一种兼容SVG和VML的矢量图形绘制方法，可在不同浏览器中实现一致的绘图效果。通过示例代码展示了如何创建并操作矢量图形，包括直线、折线和椭圆等元素。

　　半年前看过国外一个大牛的一个demo，然后自己用他的思路写了一个类似的东西。加了点额外的功能。

　　当时主要是为了学习svg的部分api，做着玩。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rag Doll</title> <meta name="Author" content="hongru.chen" /> <style _mce_bogus="1"></style> <script type="text/javascript"></script> </head> <body> <div id="screen"> <div id="title">Rag Doll</div> </div> </body> </html>

里面有做svg和vml的兼容，所以ie6.0+也ok的，但是效率还是很慢。（画直线，折线，和椭圆）
右上角控制栏里的 “shake”和各种参数都可以点下试试看。

/* ========== for svg and vml compatible ========== */
var __SVG = false;
var __svgNS = false;
if (document.createElementNS) {
	__svgNS = "http://www.w3.org/2000/svg";
	__svg = document.createElementNS(__svgNS, "svg");
	__SVG = (__svg.x != null);
}
if (__SVG) {
	/* ============= SVG ============== */
	vectorGraphics = function(o, antialias) {
		this.canvas = document.createElementNS(__svgNS, "svg");
		this.canvas.style.position = "absolute";
		o.appendChild(this.canvas);
		this.createLine = function(w, col, linecap) {
			var o = document.createElementNS(__svgNS, "line");
			o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
			o.setAttribute("stroke-width", Math.round(w)+"px");
			if (col) o.setAttribute("stroke", col);
			if (linecap) o.setAttribute("stroke-linecap", linecap);
			o.move = function(x1, y1, x2, y2) {
				this.setAttribute("x1", Math.round(x1) + .5);
				this.setAttribute("y1", Math.round(y1));
				this.setAttribute("x2", Math.round(x2));
				this.setAttribute("y2", Math.round(y2));
			}
			o.color = function(c){ this.setAttribute("stroke", c); }
			o.RGBcolor = function(R, G, B){ this.setAttribute("stroke", "rgb("+Math.round(R)+","+Math.round(G)+","+Math.round(B)+")"); }
			o.stroke_weight = function(s){ this.setAttribute("stroke-width", Math.round(s)+"px"); }
			this.canvas.appendChild(o);
			return o;
		}
		this.createPolyline = function(w, points, col, fill) {
			var o = document.createElementNS(__svgNS, "polyline");
			o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
			o.setAttribute("stroke-width", Math.round(w));
			if (col) o.setAttribute("stroke", col);
			o.setAttribute("fill", fill?fill:"none");
			if (points) o.setAttribute("points", points);
			o.move = function(points) {
				this.setAttribute("points", points);
			}
			this.canvas.appendChild(o);
			return o;
		}
		this.createOval = function(diam, filled) {
			var o = document.createElementNS(__svgNS, "circle");
			o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
			o.setAttribute("stroke-width", 0);
			o.setAttribute("r", Math.round(diam / 2));
			o.style.cursor = "pointer";
			o.move = function(x1, y1, radius) {
				this.setAttribute("cx", Math.round(x1));
				this.setAttribute("cy", Math.round(y1));
				this.setAttribute("r", Math.round(radius));
			}
			o.stroke_color = function(col) { this.setAttribute("stroke", col); }
			o.fill_color = function(col) { this.setAttribute("fill", col); }
			o.stroke_weight = function(sw) { this.setAttribute("stroke-width", sw); }
			this.canvas.appendChild(o);
			return o;
		}
	}
	
} else if (document.createStyleSheet) {
	/* ============= VML ============== */
	vectorGraphics = function(o, antialias) {
		document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
		var style = document.createStyleSheet();
		var VMLel = ['line','stroke','polyline','fill','oval'];
		for (var i=0,l=VMLel.length;i<l;i++) {
			style.addRule('v\\:'+VMLel[i], "behavior: url(#default#VML);");
			style.addRule('v\\:'+VMLel[i], "antialias: "+antialias+";");
		}
		this.canvas = o;
		this.createLine = function(w, col, linecap) {
			var o = document.createElement("v:line");
			o.strokeweight = Math.round(w)+"px";
			if (col) o.strokecolor = col;
			o.move = function(x1, y1, x2, y2) {
				this.to   = (Math.round(x1) + .5) + "," + Math.round(y1);
				this.from = Math.round(x2) + "," + Math.round(y2);
			}
			o.color = function(c){ this.strokecolor = c; }
			o.RGBcolor = function(R, G, B){ this.strokecolor = "rgb("+Math.round(R)+","+Math.round(G)+","+Math.round(B)+")"; }
			o.stroke_weight = function(s){ this.strokeweight = Math.round(s)+"px"; }
			if (linecap) {
				s = document.createElement("v:stroke");
				s.endcap = linecap;
				o.appendChild(s);
			}
			this.canvas.appendChild(o);
			return o;
		}
		this.createPolyline = function(w, points, col, fill) {
			var o = document.createElement("v:polyline");
			o.strokeweight = Math.round(w)+"px";
			if (col) o.strokecolor = col;
			o.points = points;
			if (fill) o.fillcolor = fill;
			else {
				s = document.createElement("v:fill");
				s.on = "false";
				o.appendChild(s);
			}
			o.move = function(points) {
				this.points.value = points;
			}
			this.canvas.appendChild(o);
			return o;
		}
		this.createOval = function(diam, filled) {
			var o = document.createElement("v:oval");
			var os = o.style;
			os.position = "absolute";
			os.cursor = "pointer";
			o.strokeweight = 1;
			o.filled = filled;
			os.width = Math.round(diam) + "px";
			os.height = Math.round(diam) + "px";
			o.move = function(x1, y1, radius) {
				os.left   = Math.round(x1 - radius) + "px";
				os.top    = Math.round(y1 - radius) + "px";
				os.width  = Math.round(radius * 2) + "px";
				os.height = Math.round(radius * 2) + "px";
			}
			o.stroke_color = function(col) { this.strokecolor = col; }
			o.fill_color = function(col) { this.fillcolor = col; }
			o.stroke_weight = function(sw) { this.strokeweight = sw; }
			this.canvas.appendChild(o);
			return o;
		}
	}
} else {
	/* ==== no script ==== */
	vectorGraphics = function(o, i) {
		return false;
	}
}

关于画矢量图（直线，折线，圆），下面是个简单的演示，利用上面的代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"></script> <style _mce_bogus="1"></style> </head> <body> <div id="screen"></div> <input id="draw-line" type="button" value="绘制矢量图" /> <input id="rotate-line" class="hide" type="button" value="变换" /> <script type="text/javascript"></script> </body> </html>

在做浏览器适配的时候，某些情况下不得不考虑ie低版本的兼容时，其实svg+vml在矢量图方面算个不错的选择。

利用上面的直线和圆，其实就可以做个时钟了。: )