vml.js

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

			if(closed && this.shape.points.length) this.shape.points.push(this.shape.points[0]);
		}else{
			this.shape = dojox.gfx.makeParameters(this.shape, points);
		}
		this.bbox = null;
		var attr = [], p = this.shape.points;
		if(p.length > 0){
			attr.push("m");
			var k = 1;
			if(typeof p[0] == "number"){
				attr.push(p[0].toFixed());
				attr.push(p[1].toFixed());
				k = 2;
			}else{
				attr.push(p[0].x.toFixed());
				attr.push(p[0].y.toFixed());
			}
			if(p.length > k){
				attr.push("l");
				for(var i = k; i < p.length; ++i){
					if(typeof p[i] == "number"){
						attr.push(p[i].toFixed());
					}else{
						attr.push(p[i].x.toFixed());
						attr.push(p[i].y.toFixed());
					}
				}
			}
		}
		attr.push("e");
		this.rawNode.path.v = attr.join(" ");
		return this.setTransform(this.matrix);	// self
	}
});
dojox.gfx.Polyline.nodeType = "shape";

dojo.declare("dojox.gfx.Image", dojox.gfx.shape.Image, {
	// summary: an image (VML)
	constructor: function(rawNode){
		if(rawNode) rawNode.setAttribute("dojoGfxType", "image");
	},
	getEventSource: function() {
		// summary: returns a Node, which is used as 
		//	a source of events for this shape
		return this.rawNode ? this.rawNode.firstChild : null;	// Node
	},
	setShape: function(newShape){
		// summary: sets an image shape object (VML)
		// newShape: Object: an image shape object
		var shape = this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		this.rawNode.firstChild.src = shape.src;
		return this.setTransform(this.matrix);	// self
	},
	_setDimensions: function(s, w, h){
		if(w || h){
			s.width  = w + "px";
			s.height = h + "px";
		}
	},
	_resetImage: function(){
		var s = this.rawNode.firstChild.style,
			shape = this.shape;
		s.left = "0px";
		s.top  = "0px";
		this._setDimensions(s, shape.width, shape.height);
	},
	_applyTransform: function() {
		var matrix = this._getRealMatrix(),
			img = this.rawNode.firstChild,
			s = img.style,
			shape = this.shape;
		if(matrix){
			matrix = dojox.gfx.matrix.multiply(matrix, {dx: shape.x, dy: shape.y});
		}else{
			matrix = dojox.gfx.matrix.normalize({dx: shape.x, dy: shape.y});
		}
		if(matrix.xy == 0 && matrix.yx == 0 && matrix.xx > 0 && matrix.yy > 0){
			// special case to avoid filters
			this.rawNode.style.filter = "";
			s.left = Math.floor(matrix.dx) + "px";
			s.top  = Math.floor(matrix.dy) + "px";
			this._setDimensions(s, Math.floor(matrix.xx * shape.width), Math.floor(matrix.yy * shape.height));
		}else{
			this._resetImage();
			var f = this.rawNode.filters["DXImageTransform.Microsoft.Matrix"];
			if(f){
				f.M11 = matrix.xx;
				f.M12 = matrix.xy;
				f.M21 = matrix.yx;
				f.M22 = matrix.yy;
				f.Dx = matrix.dx;
				f.Dy = matrix.dy;
			}else{
				this.rawNode.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + matrix.xx + 
					", M12=" + matrix.xy + ", M21=" + matrix.yx + ", M22=" + matrix.yy + 
					", Dx=" + matrix.dx + ", Dy=" + matrix.dy + ")";
			}
		}
		return this;
	}
});
dojox.gfx.Image.nodeType = "div";

dojo.declare("dojox.gfx.Text", dojox.gfx.shape.Text, {
	// summary: an anchored text (VML)
	constructor: function(rawNode){
		if(rawNode){rawNode.setAttribute("dojoGfxType", "text");}
		this.fontStyle = null;
	},
	_alignment: {start: "left", middle: "center", end: "right"},
	setShape: function(newShape){
		// summary: sets a text shape object (VML)
		// newShape: Object: a text shape object
		this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		var r = this.rawNode, s = this.shape, x = s.x, y = s.y.toFixed();
		switch(s.align){
			case "middle":
				x -= 5;
				break;
			case "end":
				x -= 10;
				break;
		}
		this.rawNode.path.v = "m" + x.toFixed() + "," + y + 
			"l" + (x + 10).toFixed() + "," + y + "e";
		// find path and text path
		var p = null, t = null, c = r.childNodes;
		for(var i = 0; i < c.length; ++i){
			var tag = c[i].tagName;
			if(tag == "path"){
				p = c[i];
				if(t) break;
			}else if(tag == "textpath"){
				t = c[i];
				if(p) break;
			}
		}
		if(!p){
			p = this.rawNode.ownerDocument.createElement("v:path");
			r.appendChild(p);
		}
		if(!t){
			t = this.rawNode.ownerDocument.createElement("v:textpath");
			r.appendChild(t);
		}
		p.textPathOk = true;
		t.on = true;
		var a = dojox.gfx.vml.text_alignment[s.align];
		t.style["v-text-align"] = a ? a : "left";
		t.style["text-decoration"] = s.decoration;
		t.style["v-rotate-letters"] = s.rotated;
		t.style["v-text-kern"] = s.kerning;
		t.string = s.text;
		return this.setTransform(this.matrix);	// self
	},
	_setFont: function(){
		// summary: sets a font object (VML)
		var f = this.fontStyle, c = this.rawNode.childNodes;
		for(var i = 0; i < c.length; ++i){
			if(c[i].tagName == "textpath"){
				c[i].style.font = dojox.gfx.makeFontString(f);
				break;
			}
		}
		this.setTransform(this.matrix);
	},
	_getRealMatrix: function(){
		// summary: returns the cumulative ("real") transformation matrix
		//	by combining the shape's matrix with its parent's matrix;
		//	it makes a correction for a font size
		var matrix = dojox.gfx.Shape.prototype._getRealMatrix.call(this);
		// It appears that text is always aligned vertically at a middle of x-height (???).
		// It is impossible to obtain these metrics from VML => I try to approximate it with 
		// more-or-less util value of 0.7 * FontSize, which is typical for European fonts.
		if(matrix){
			matrix = dojox.gfx.matrix.multiply(matrix, 
				{dy: -dojox.gfx.normalizedLength(this.fontStyle ? this.fontStyle.size : "10pt") * 0.35});
		}
		return matrix;	// dojox.gfx.Matrix2D
	},
	getTextWidth: function(){ 
		// summary: get the text width, in px 
		var rawNode = this.rawNode, _display = rawNode.style.display; 
		rawNode.style.display = "inline"; 
		var _width = dojox.gfx.pt2px(parseFloat(rawNode.currentStyle.width)); 
		rawNode.style.display = _display; 
		return _width; 
	} 
});
dojox.gfx.Text.nodeType = "shape";

dojox.gfx.path._calcArc = function(alpha){
	// return a start point, 1st and 2nd control points, and an end point
	var cosa  = Math.cos(alpha), sina  = Math.sin(alpha),
		p2 = {x: cosa + (4 / 3) * (1 - cosa), y: sina - (4 / 3) * cosa * (1 - cosa) / sina};
	return {
		s:  {x: cosa, y: -sina},
		c1: {x: p2.x, y: -p2.y},
		c2: p2,
		e:  {x: cosa, y: sina}
	};
};

dojo.declare("dojox.gfx.Path", dojox.gfx.path.Path, {
	// summary: a path shape (VML)
	constructor: function(rawNode){
		if(rawNode && !rawNode.getAttribute("dojoGfxType")){
			rawNode.setAttribute("dojoGfxType", "path");
		}
		this.vmlPath = "";
		this.lastControl = {};
	},
	_updateWithSegment: function(segment){
		// summary: updates the bounding box of path with new segment
		// segment: Object: a segment
		var last = dojo.clone(this.last);
		dojox.gfx.Path.superclass._updateWithSegment.apply(this, arguments);
		// add a VML path segment
		var path = this[this.renderers[segment.action]](segment, last);
		if(typeof this.vmlPath == "string"){
			this.vmlPath += path.join("");
			this.rawNode.path.v = this.vmlPath + " r0,0 e";
		}else{
			this.vmlPath = this.vmlPath.concat(path);
		}
	},
	setShape: function(newShape){
		// summary: forms a path using a shape (VML)
		// newShape: Object: an VML path string or a path object (see dojox.gfx.defaultPath)
		this.vmlPath = [];
		this.lastControl = {};
		dojox.gfx.Path.superclass.setShape.apply(this, arguments);
		this.vmlPath = this.vmlPath.join("");
		this.rawNode.path.v = this.vmlPath + " r0,0 e";
		return this;
	},
	_pathVmlToSvgMap: {m: "M", l: "L", t: "m", r: "l", c: "C", v: "c", qb: "Q", x: "z", e: ""},
	// VML-specific segment renderers
	renderers: {
		M: "_moveToA", m: "_moveToR", 
		L: "_lineToA", l: "_lineToR", 
		H: "_hLineToA", h: "_hLineToR", 
		V: "_vLineToA", v: "_vLineToR", 
		C: "_curveToA", c: "_curveToR", 
		S: "_smoothCurveToA", s: "_smoothCurveToR", 
		Q: "_qCurveToA", q: "_qCurveToR", 
		T: "_qSmoothCurveToA", t: "_qSmoothCurveToR", 
		A: "_arcTo", a: "_arcTo", 
		Z: "_closePath", z: "_closePath"
	},
	_addArgs: function(path, args, from, upto){
		if(typeof upto == "undefined"){
			upto = args.length;
		}
		if(typeof from == "undefined"){
			from = 0;
		}
		for(var i = from; i < upto; ++i){
			path.push(" ");
			path.push(args[i].toFixed());
		}
	},
	_addArgsAdjusted: function(path, last, args, from, upto){
		if(typeof upto == "undefined"){
			upto = args.length;
		}
		if(typeof from == "undefined"){
			from = 0;
		}
		for(var i = from; i < upto; i += 2){
			path.push(" ");
			path.push((last.x + args[i]).toFixed());
			path.push(" ");
			path.push((last.y + args[i + 1]).toFixed());
		}
	},
	_moveToA: function(segment){
		var p = [" m"], n = segment.args, l = n.length;
		if(l == 2){
			this._addArgs(p, n);
		}else{
			this._addArgs(p, n, 0, 2);
			p.push(" l");
			this._addArgs(p, n, 2);
		}
		this.lastControl = {};
		return p;
	},
	_moveToR: function(segment, last){
		var p = ["x" in last ? " t" : " m"], n = segment.args, l = n.length;
		if(l == 2){
			this._addArgs(p, n);
		}else{
			this._addArgs(p, n, 0, 2);
			p.push(" r");
			this._addArgs(p, n, 2);
		}
		this.lastControl = {};
		return p;
	},
	_lineToA: function(segment){
		var p = [" l"];
		this._addArgs(p, segment.args);
		this.lastControl = {};
		return p;
	},
	_lineToR: function(segment){
		var p = [" r"];
		this._addArgs(p, segment.args);
		this.lastControl = {};
		return p;
	},
	_hLineToA: function(segment, last){
		var p = [" l"], n = segment.args, l = n.length, y = " " + last.y.toFixed();
		for(var i = 0; i < l; ++i){
			p.push(" ");
			p.push(n[i].toFixed());
			p.push(y);
		}
		this.lastControl = {};
		return p;
	},
	_hLineToR: function(segment){
		var p = [" r"], n = segment.args, l = n.length;
		for(var i = 0; i < l; ++i){
			p.push(" ");
			p.push(n[i].toFixed());
			p.push(" 0");
		}
		this.lastControl = {};
		return p;
	},
	_vLineToA: function(segment, last){
		var p = [" l"], n = segment.args, l = n.length, x = " " + last.x.toFixed();
		for(var i = 0; i < l; ++i){
			p.push(x);
			p.push(" ");
			p.push(n[i].toFixed());
		}
		this.lastControl = {};
		return p;
	},
	_vLineToR: function(segment){
		var p = [" r"], n = segment.args, l = n.length;
		for(var i = 0; i < l; ++i){
			p.push(" 0 ");
			p.push(n[i].toFixed());
		}
		this.lastControl = {};
		return p;
	},
	_curveToA: function(segment){
		var p = [], n = segment.args, l = n.length;
		for(var i = 0; i < l; i += 6){
			p.push(" c");
			this._addArgs(p, n, i, i + 6);
		}
		this.lastControl = {x: n[l - 4], y: n[l - 3], type: "C"};
		return p;
	},
	_curveToR: function(segment, last){
		var p = [], n = segment.args, l = n.length;
		for(var i = 0; i < l; i += 6){
			p.push(" v");
			this._addArgs(p, n, i, i + 6);
			this.lastControl = {x: last.x + n[i + 2], y: last.y + n[i + 3]};
			last.x += n[i + 4];
			last.y += n[i + 5];
		}
		this.lastControl.type = "C";
		return p;
	},
	_smoothCurveToA: function(segment, last){
		var p = [], n = segment.args, l = n.length;
		for(var i = 0; i < l; i += 4){
			p.push(" c");
			if(this.lastControl.type == "C"){
				this._addArgs(p, [
					2 * last.x - this.lastControl.x, 
					2 * last.y - this.lastControl.y
				]);
			}else{
				this._addArgs(p, [last.x, last.y]);
			}
			this._addArgs(p, n, i, i + 4);
		}
		this.lastControl = {x: n[l - 4], y: n[l - 3], type: "C"};