vml.js

这是一个ajax的例子大家好好的看看就是一个鱼眼的效果

if(!dojo._hasResource["dojox.gfx.vml"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.gfx.vml"] = true;
dojo.provide("dojox.gfx.vml");

dojo.require("dojox.gfx._base");
dojo.require("dojox.gfx.shape");
dojo.require("dojox.gfx.path");
dojo.require("dojox.gfx.arc");

// dojox.gfx.vml.xmlns: String: a VML's namespace
dojox.gfx.vml.xmlns = "urn:schemas-microsoft-com:vml";

// dojox.gfx.vml.text_alignment: Object: mapping from SVG alignment to VML alignment
dojox.gfx.vml.text_alignment = {start: "left", middle: "center", end: "right"};

dojox.gfx.vml._parseFloat = function(str) {
	// summary: a helper function to parse VML-specific floating-point values
	// str: String: a representation of a floating-point number
	return str.match(/^\d+f$/i) ? parseInt(str) / 65536 : parseFloat(str);	// Number
};

dojox.gfx.vml._bool = {"t": 1, "true": 1};

dojo.extend(dojox.gfx.Shape, {
	// summary: VML-specific implementation of dojox.gfx.Shape methods

	setFill: function(fill){
		// summary: sets a fill object (VML)
		// fill: Object: a fill object
		//	(see dojox.gfx.defaultLinearGradient, 
		//	dojox.gfx.defaultRadialGradient, 
		//	dojox.gfx.defaultPattern, 
		//	or dojo.Color)

		if(!fill){
			// don't fill
			this.fillStyle = null;
			this.rawNode.filled = "f";
			return this;
		}
		if(typeof fill == "object" && "type" in fill){
			// gradient
			var i, f, fo, a, s;
			switch(fill.type){
				case "linear":
					var matrix = this._getRealMatrix(), m = dojox.gfx.matrix;
					s = [];
					f = dojox.gfx.makeParameters(dojox.gfx.defaultLinearGradient, fill);
					a = f.colors;
					this.fillStyle = f;
					dojo.forEach(a, function(v, i, a){
						a[i].color = dojox.gfx.normalizeColor(v.color);
					});
					if(a[0].offset > 0){
						s.push("0 " + a[0].color.toHex());
					}
					for(i = 0; i < a.length; ++i){
						s.push(a[i].offset.toFixed(8) + " " + a[i].color.toHex());
					}
					i = a.length - 1;
					if(a[i].offset < 1){
						s.push("1 " + a[i].color.toHex());
					}
					fo = this.rawNode.fill;
					fo.colors.value = s.join(";");
					fo.method = "sigma";
					fo.type = "gradient";
					var fc1 = matrix ? m.multiplyPoint(matrix, f.x1, f.y1) : {x: f.x1, y: f.y1},
						fc2 = matrix ? m.multiplyPoint(matrix, f.x2, f.y2) : {x: f.x2, y: f.y2};
					fo.angle = (m._radToDeg(Math.atan2(fc2.x - fc1.x, fc2.y - fc1.y)) + 180) % 360;
					fo.on = true;
					break;
				case "radial":
					f = dojox.gfx.makeParameters(dojox.gfx.defaultRadialGradient, fill);
					this.fillStyle = f;
					var l = parseFloat(this.rawNode.style.left),
						t = parseFloat(this.rawNode.style.top),
						w = parseFloat(this.rawNode.style.width),
						h = parseFloat(this.rawNode.style.height),
						c = isNaN(w) ? 1 : 2 * f.r / w;
					a = [];
					// add a color at the offset 0 (1 in VML coordinates)
					if(f.colors[0].offset > 0){
						a.push({offset: 1, color: dojox.gfx.normalizeColor(f.colors[0].color)});
					}
					// massage colors
					dojo.forEach(f.colors, function(v, i){
						a.push({offset: 1 - v.offset * c, color: dojox.gfx.normalizeColor(v.color)});
					});
					i = a.length - 1;
					while(i >= 0 && a[i].offset < 0){ --i; }
					if(i < a.length - 1){
						// correct excessive colors
						var q = a[i], p = a[i + 1];
						p.color = dojo.blendColors(q.color, p.color, q.offset / (q.offset - p.offset));
						p.offset = 0;
						while(a.length - i > 2) a.pop();
					}
					// set colors
					i = a.length - 1, s = [];
					if(a[i].offset > 0){
						s.push("0 " + a[i].color.toHex());
					}
					for(; i >= 0; --i){
						s.push(a[i].offset.toFixed(8) + " " + a[i].color.toHex());
					}
					fo = this.rawNode.fill;
					fo.colors.value = s.join(";");
					fo.method = "sigma";
					fo.type = "gradientradial";
					if(isNaN(w) || isNaN(h) || isNaN(l) || isNaN(t)){
						fo.focusposition = "0.5 0.5";
					}else{
						fo.focusposition = ((f.cx - l) / w).toFixed(8) + " " + ((f.cy - t) / h).toFixed(8);
					}
					fo.focussize = "0 0";
					fo.on = true;
					break;
				case "pattern":
					f = dojox.gfx.makeParameters(dojox.gfx.defaultPattern, fill);
					this.fillStyle = f;
					fo = this.rawNode.fill;
					fo.type = "tile";
					fo.src = f.src;
					if(f.width && f.height){
						// in points
						fo.size.x = dojox.gfx.px2pt(f.width);
						fo.size.y = dojox.gfx.px2pt(f.height);
					}
					fo.alignShape = "f";
					fo.position.x = 0;
					fo.position.y = 0;
					fo.origin.x = f.width  ? f.x / f.width  : 0;
					fo.origin.y = f.height ? f.y / f.height : 0;
					fo.on = true;
					break;
			}
			this.rawNode.fill.opacity = 1;
			return this;
		}
		// color object
		this.fillStyle = dojox.gfx.normalizeColor(fill);
		this.rawNode.fill.method = "any";
		this.rawNode.fill.type = "solid";
		this.rawNode.fillcolor = this.fillStyle.toHex();
		this.rawNode.fill.opacity = this.fillStyle.a;
		this.rawNode.filled = true;
		return this;	// self
	},

	setStroke: function(stroke){
		// summary: sets a stroke object (VML)
		// stroke: Object: a stroke object
		//	(see dojox.gfx.defaultStroke) 
	
		if(!stroke){
			// don't stroke
			this.strokeStyle = null;
			this.rawNode.stroked = "f";
			return this;
		}
		// normalize the stroke
		if(typeof stroke == "string"){
			stroke = {color: stroke};
		}
		var s = this.strokeStyle = dojox.gfx.makeParameters(dojox.gfx.defaultStroke, stroke);
		s.color = dojox.gfx.normalizeColor(s.color);
		// generate attributes
		var rn = this.rawNode;
		rn.stroked = true;
		rn.strokecolor = s.color.toCss();
		rn.strokeweight = s.width + "px";	// TODO: should we assume that the width is always in pixels?
		if(rn.stroke) {
			rn.stroke.opacity = s.color.a;
			rn.stroke.endcap = this._translate(this._capMap, s.cap);
			if(typeof s.join == "number") {
				rn.stroke.joinstyle = "miter";
				rn.stroke.miterlimit = s.join;
			}else{
				rn.stroke.joinstyle = s.join;
				// rn.stroke.miterlimit = s.width;
			}
			rn.stroke.dashstyle = s.style == "none" ? "Solid" : s.style;
		}
		return this;	// self
	},
	
	_capMap: { butt: 'flat' },
	_capMapReversed: { flat: 'butt' },
	
	_translate: function(dict, value) {
		return (value in dict) ? dict[value] : value;
	},
	
	_applyTransform: function() {
		if(this.fillStyle && this.fillStyle.type == "linear"){
			this.setFill(this.fillStyle);
		}
		var matrix = this._getRealMatrix();
		if(!matrix) return this;
		var skew = this.rawNode.skew;
		if(typeof skew == "undefined"){
			for(var i = 0; i < this.rawNode.childNodes.length; ++i){
				if(this.rawNode.childNodes[i].tagName == "skew"){
					skew = this.rawNode.childNodes[i];
					break;
				}
			}
		}
		if(skew){
			skew.on = "f";
			var mt = matrix.xx.toFixed(8) + " " + matrix.xy.toFixed(8) + " " + 
				matrix.yx.toFixed(8) + " " + matrix.yy.toFixed(8) + " 0 0",
				offset = Math.floor(matrix.dx).toFixed() + "px " + Math.floor(matrix.dy).toFixed() + "px",
				s = this.rawNode.style,
				l = parseFloat(s.left),
				t = parseFloat(s.top),
				w = parseFloat(s.width),
				h = parseFloat(s.height);
			if(isNaN(l)) l = 0;
			if(isNaN(t)) t = 0;
			if(isNaN(w)) w = 1;
			if(isNaN(h)) h = 1;
			var origin = (-l / w - 0.5).toFixed(8) + " " + (-t / h - 0.5).toFixed(8);
			skew.matrix =  mt;
			skew.origin = origin;
			skew.offset = offset;
			skew.on = true;
		}
		return this;
	},

	setRawNode: function(rawNode){
		// summary:
		//	assigns and clears the underlying node that will represent this
		//	shape. Once set, transforms, gradients, etc, can be applied.
		//	(no fill & stroke by default)
		rawNode.stroked = "f";
		rawNode.filled  = "f";
		this.rawNode = rawNode;
	},
	
	// move family

	_moveToFront: function(){
		// summary: moves a shape to front of its parent's list of shapes (VML)
		this.rawNode.parentNode.appendChild(this.rawNode);
		return this;
	},
	_moveToBack: function(){
		// summary: moves a shape to back of its parent's list of shapes (VML)
		var r = this.rawNode, p = r.parentNode, n = p.firstChild;
		p.insertBefore(r, n);
		if(n.tagName == "rect"){
			// surface has a background rectangle, which position should be preserved
			n.swapNode(r);
		}
		return this;
	},

	_getRealMatrix: function(){
		// summary: returns the cumulative ("real") transformation matrix
		//	by combining the shape's matrix with its parent's matrix
		return this.parentMatrix ? new dojox.gfx.Matrix2D([this.parentMatrix, this.matrix]) : this.matrix;	// dojox.gfx.Matrix2D
	}
});

dojo.declare("dojox.gfx.Group", dojox.gfx.Shape, {
	// summary: a group shape (VML), which can be used 
	//	to logically group shapes (e.g, to propagate matricies)
	constructor: function(){
		dojox.gfx.vml.Container._init.call(this);
	},
	// apply transformation
	_applyTransform: function(){
		// summary: applies a transformation matrix to a group
		var matrix = this._getRealMatrix();
		for(var i = 0; i < this.children.length; ++i){
			this.children[i]._updateParentMatrix(matrix);
		}
		return this;	// self
	}
});
dojox.gfx.Group.nodeType = "group";

dojo.declare("dojox.gfx.Rect", dojox.gfx.shape.Rect, {
	// summary: a rectangle shape (VML)
	setShape: function(newShape){
		// summary: sets a rectangle shape object (VML)
		// newShape: Object: a rectangle shape object
		var shape = this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		var style = this.rawNode.style;
		style.left   = shape.x.toFixed();
		style.top    = shape.y.toFixed();
		style.width  = (typeof shape.width == "string" && shape.width.indexOf("%") >= 0)  ? shape.width  : shape.width.toFixed();
		style.height = (typeof shape.width == "string" && shape.height.indexOf("%") >= 0) ? shape.height : shape.height.toFixed();
		var r = Math.min(1, (shape.r / Math.min(parseFloat(shape.width), parseFloat(shape.height)))).toFixed(8);
		// a workaround for the VML's arcsize bug: cannot read arcsize of an instantiated node
		var parent = this.rawNode.parentNode, before = null;
		if(parent){
			if(parent.lastChild != this.rawNode){
				for(var i = 0; i < parent.childNodes.length; ++i){
					if(parent.childNodes[i] == this.rawNode){
						before = parent.childNodes[i+1];
						break;
					}
				}
			}
			parent.removeChild(this.rawNode);
		}
		this.rawNode.arcsize = r;
		if(parent){
			if(before){
				parent.insertBefore(this.rawNode, before);
			}else{
				parent.appendChild(this.rawNode);
			}
		}
		// set all necessary styles, which are lost by VML (yes, it's a VML's bug)
		return this.setTransform(this.matrix).setFill(this.fillStyle).setStroke(this.strokeStyle);	// self
	}
});
dojox.gfx.Rect.nodeType = "roundrect"; // use a roundrect so the stroke join type is respected

dojo.declare("dojox.gfx.Ellipse", dojox.gfx.shape.Ellipse, {
	// summary: an ellipse shape (VML)
	setShape: function(newShape){
		// summary: sets an ellipse shape object (VML)
		// newShape: Object: an ellipse shape object
		var shape = this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		var style = this.rawNode.style;
		style.left   = (shape.cx - shape.rx).toFixed();
		style.top    = (shape.cy - shape.ry).toFixed();
		style.width  = (shape.rx * 2).toFixed();
		style.height = (shape.ry * 2).toFixed();
		return this.setTransform(this.matrix);	// self
	}
});
dojox.gfx.Ellipse.nodeType = "oval";

dojo.declare("dojox.gfx.Circle", dojox.gfx.shape.Circle, {
	// summary: a circle shape (VML)
	setShape: function(newShape){
		// summary: sets a circle shape object (VML)
		// newShape: Object: a circle shape object
		var shape = this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		var style = this.rawNode.style;
		style.left   = (shape.cx - shape.r).toFixed();
		style.top    = (shape.cy - shape.r).toFixed();
		style.width  = (shape.r * 2).toFixed();
		style.height = (shape.r * 2).toFixed();
		return this;	// self
	}
});
dojox.gfx.Circle.nodeType = "oval";

dojo.declare("dojox.gfx.Line", dojox.gfx.shape.Line, {
	// summary: a line shape (VML)
	constructor: function(rawNode){
		if(rawNode) rawNode.setAttribute("dojoGfxType", "line");
	},
	setShape: function(newShape){
		// summary: sets a line shape object (VML)
		// newShape: Object: a line shape object
		var shape = this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		this.rawNode.path.v = "m" + shape.x1.toFixed() + " " + shape.y1.toFixed() +
			"l" + shape.x2.toFixed() + " " + shape.y2.toFixed() + "e";
		return this.setTransform(this.matrix);	// self
	}
});
dojox.gfx.Line.nodeType = "shape";

dojo.declare("dojox.gfx.Polyline", dojox.gfx.shape.Polyline, {
	// summary: a polyline/polygon shape (VML)
	constructor: function(rawNode){
		if(rawNode) rawNode.setAttribute("dojoGfxType", "polyline");
	},
	setShape: function(points, closed){
		// summary: sets a polyline/polygon shape object (VML)
		// points: Object: a polyline/polygon shape object
		// closed: Boolean?: if true, close the polyline explicitely
		if(points && points instanceof Array){
			// branch
			// points: Array: an array of points
			this.shape = dojox.gfx.makeParameters(this.shape, { points: points });