vml.js

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

		return p;
	},
	_smoothCurveToR: function(segment, last){
		var p = [], n = segment.args, l = n.length;
		for(var i = 0; i < l; i += 4){
			p.push(" v");
			if(this.lastControl.type == "C"){
				this._addArgs(p, [
					last.x - this.lastControl.x, 
					last.y - this.lastControl.y
				]);
			}else{
				this._addArgs(p, [0, 0]);
			}
			this._addArgs(p, n, i, i + 4);
			this.lastControl = {x: last.x + n[i], y: last.y + n[i + 1]};
			last.x += n[i + 2];
			last.y += n[i + 3];
		}
		this.lastControl.type = "C";
		return p;
	},
	_qCurveToA: function(segment){
		var p = [], n = segment.args, l = n.length;
		for(var i = 0; i < l; i += 4){
			p.push(" qb");
			this._addArgs(p, n, i, i + 4);
		}
		this.lastControl = {x: n[l - 4], y: n[l - 3], type: "Q"};
		return p;
	},
	_qCurveToR: function(segment, last){
		var p = [], n = segment.args, l = n.length;
		for(var i = 0; i < l; i += 4){
			p.push(" qb");
			this._addArgsAdjusted(p, last, n, i, i + 4);
			this.lastControl = {x: last.x + n[i], y: last.y + n[i + 1]};
			last.x += n[i + 2];
			last.y += n[i + 3];
		}
		this.lastControl.type = "Q";
		return p;
	},
	_qSmoothCurveToA: function(segment, last){
		var p = [], n = segment.args, l = n.length;
		for(var i = 0; i < l; i += 2){
			p.push(" qb");
			if(this.lastControl.type == "Q"){
				this._addArgs(p, [
					this.lastControl.x = 2 * last.x - this.lastControl.x, 
					this.lastControl.y = 2 * last.y - this.lastControl.y
				]);
			}else{
				this._addArgs(p, [
					this.lastControl.x = last.x, 
					this.lastControl.y = last.y
				]);
			}
			this._addArgs(p, n, i, i + 2);
		}
		this.lastControl.type = "Q";
		return p;
	},
	_qSmoothCurveToR: function(segment, last){
		var p = [], n = segment.args, l = n.length;
		for(var i = 0; i < l; i += 2){
			p.push(" qb");
			if(this.lastControl.type == "Q"){
				this._addArgs(p, [
					this.lastControl.x = 2 * last.x - this.lastControl.x, 
					this.lastControl.y = 2 * last.y - this.lastControl.y
				]);
			}else{
				this._addArgs(p, [
					this.lastControl.x = last.x, 
					this.lastControl.y = last.y
				]);
			}
			this._addArgsAdjusted(p, last, n, i, i + 2);
		}
		this.lastControl.type = "Q";
		return p;
	},
	_arcTo: function(segment, last){
		var p = [], n = segment.args, l = n.length, relative = segment.action == "a";
		for(var i = 0; i < l; i += 7){
			var x1 = n[i + 5], y1 = n[i + 6];
			if(relative){
				x1 += last.x;
				y1 += last.y;
			}
			var result = dojox.gfx.arc.arcAsBezier(
				last, n[i], n[i + 1], n[i + 2], 
				n[i + 3] ? 1 : 0, n[i + 4] ? 1 : 0,
				x1, y1
			);
			for(var j = 0; j < result.length; ++j){
				p.push(" c");
				this._addArgs(p, result[j]);
			}
			last = {x: x1, y: y1};
		}
		this.lastControl = {};
		return p;
	},
	_closePath: function(){
		this.lastControl = {};
		return ["x"];
	}
});
dojox.gfx.Path.nodeType = "shape";

dojo.declare("dojox.gfx.TextPath", dojox.gfx.Path, {
	// summary: a textpath shape (VML)
	constructor: function(rawNode){
		if(rawNode){rawNode.setAttribute("dojoGfxType", "textpath");}
		this.fontStyle = null;
		if(!("text" in this)){
			this.text = dojo.clone(dojox.gfx.defaultTextPath);
		}
		if(!("fontStyle" in this)){
			this.fontStyle = dojo.clone(dojox.gfx.defaultFont);
		}
	},
	setText: function(newText){
		// summary: sets a text to be drawn along the path
		this.text = dojox.gfx.makeParameters(this.text, 
			typeof newText == "string" ? {text: newText} : newText);
		this._setText();
		return this;	// self
	},
	setFont: function(newFont){
		// summary: sets a font for text
		this.fontStyle = typeof newFont == "string" ? 
			dojox.gfx.splitFontString(newFont) :
			dojox.gfx.makeParameters(dojox.gfx.defaultFont, newFont);
		this._setFont();
		return this;	// self
	},

	_setText: function(){
		// summary: sets a text shape object (VML)
		this.bbox = null;
		var r = this.rawNode, s = this.text,
			// find path and text path
			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;
	},
	_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;
			}
		}
	}
});
dojox.gfx.TextPath.nodeType = "shape";

dojo.declare("dojox.gfx.Surface", dojox.gfx.shape.Surface, {
	// summary: a surface object to be used for drawings (VML)
	constructor: function(){
		dojox.gfx.vml.Container._init.call(this);
	},
	setDimensions: function(width, height){
		// summary: sets the width and height of the rawNode
		// width: String: width of surface, e.g., "100px"
		// height: String: height of surface, e.g., "100px"
		this.width  = dojox.gfx.normalizedLength(width);	// in pixels
		this.height = dojox.gfx.normalizedLength(height);	// in pixels
		if(!this.rawNode) return this;
		var cs = this.clipNode.style, 
			r = this.rawNode, rs = r.style,
			bs = this.bgNode.style;
		cs.width  = width;
		cs.height = height;
		cs.clip = "rect(0 " + width + " " + height + " 0)";
		rs.width = width;
		rs.height = height;
		r.coordsize = width + " " + height;
		bs.width = width;
		bs.height = height;
		return this;	// self
	},
	getDimensions: function(){
		// summary: returns an object with properties "width" and "height"
		var t = this.rawNode ? {
			width:  dojox.gfx.normalizedLength(this.rawNode.style.width), 
			height: dojox.gfx.normalizedLength(this.rawNode.style.height)} : null;
		if(t.width  <= 0){ t.width  = this.width; }
		if(t.height <= 0){ t.height = this.height; }
		return t;	// Object
	}
});

dojox.gfx.createSurface = function(parentNode, width, height){
	// summary: creates a surface (VML)
	// parentNode: Node: a parent node
	// width: String: width of surface, e.g., "100px"
	// height: String: height of surface, e.g., "100px"

	if(!width){ width = "100%"; }
	if(!height){ height = "100%"; }
	var s = new dojox.gfx.Surface(), p = dojo.byId(parentNode),
		c = s.clipNode = p.ownerDocument.createElement("div"),
		r = s.rawNode = p.ownerDocument.createElement("v:group"),
		cs = c.style, rs = r.style;
		
	p.style.width  = width;
	p.style.height = height;
		
	cs.position = "absolute";
	cs.width  = width;
	cs.height = height;
	cs.clip = "rect(0 " + width + " " + height + " 0)";
	rs.position = "absolute";
	rs.width  = width;
	rs.height = height;
	r.coordsize = (width == "100%" ? width : parseFloat(width)) + " " +
		(height == "100%" ? height : parseFloat(height));
	r.coordorigin = "0 0";
	
	// create a background rectangle, which is required to show all other shapes
	var b = s.bgNode = r.ownerDocument.createElement("v:rect"), bs = b.style;
	bs.left = bs.top = 0;
	bs.width  = rs.width;
	bs.height = rs.height;
	b.filled = b.stroked = "f";

	r.appendChild(b);
	c.appendChild(r);
	p.appendChild(c);
	
	s.width  = dojox.gfx.normalizedLength(width);	// in pixels
	s.height = dojox.gfx.normalizedLength(height);	// in pixels

	return s;	// dojox.gfx.Surface
};

// Extenders

dojox.gfx.vml.Container = {
	_init: function(){
		dojox.gfx.shape.Container._init.call(this);
	},
	add: function(shape){
		// summary: adds a shape to a group/surface
		// shape: dojox.gfx.Shape: an VML shape object
		if(this != shape.getParent()){
			this.rawNode.appendChild(shape.rawNode);
			//dojox.gfx.Group.superclass.add.apply(this, arguments);
			//this.inherited(arguments);
			dojox.gfx.shape.Container.add.apply(this, arguments);
		}
		return this;	// self
	},
	remove: function(shape, silently){
		// summary: remove a shape from a group/surface
		// shape: dojox.gfx.Shape: an VML shape object
		// silently: Boolean?: if true, regenerate a picture
		if(this == shape.getParent()){
			if(this.rawNode == shape.rawNode.parentNode){
				this.rawNode.removeChild(shape.rawNode);
			}
			//dojox.gfx.Group.superclass.remove.apply(this, arguments);
			//this.inherited(arguments);
			dojox.gfx.shape.Container.remove.apply(this, arguments);
		}
		return this;	// self
	},
	clear: function(){
		// summary: removes all shapes from a group/surface
		var r = this.rawNode;
		while(r.firstChild != r.lastChild){
			if(r.firstChild != this.bgNode){
				r.removeChild(r.firstChild);
			}
			if(r.lastChild != this.bgNode){
				r.removeChild(r.lastChild);
			}
		}
		//return this.inherited(arguments);	// self
		return dojox.gfx.shape.Container.clear.apply(this, arguments);
	},
	_moveChildToFront: dojox.gfx.shape.Container._moveChildToFront,
	_moveChildToBack:  dojox.gfx.shape.Container._moveChildToBack
};

dojo.mixin(dojox.gfx.shape.Creator, {
	// summary: VML shape creators
	createGroup: function(){
		// summary: creates a VML group shape
		var g = this.createObject(dojox.gfx.Group, null);	// dojox.gfx.Group
		// create a background rectangle, which is required to show all other shapes
		var r = g.rawNode.ownerDocument.createElement("v:rect");
		r.style.left = r.style.top = 0;
		r.style.width  = g.rawNode.style.width;
		r.style.height = g.rawNode.style.height;
		r.filled = r.stroked = "f";
		g.rawNode.appendChild(r);
		g.bgNode = r;
		return g;	// dojox.gfx.Group
	},
	createImage: function(image){
		// summary: creates a VML image shape
		// image: Object: an image object (see dojox.gfx.defaultImage)
		if(!this.rawNode) return null;
		var shape = new dojox.gfx.Image(), node = this.rawNode.ownerDocument.createElement('div');
		node.style.position = "absolute";
		node.style.width  = this.rawNode.style.width;
		node.style.height = this.rawNode.style.height;
		//node.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, Dx=0, Dy=0)";
		var img  = this.rawNode.ownerDocument.createElement('img');
		img.style.position = "relative";
		node.appendChild(img);
		shape.setRawNode(node);
		this.rawNode.appendChild(node);
		shape.setShape(image);
		this.add(shape);
		return shape;	// dojox.gfx.Image
	},
	createObject: function(shapeType, rawShape) {
		// summary: creates an instance of the passed shapeType class
		// shapeType: Function: a class constructor to create an instance of
		// rawShape: Object: properties to be passed in to the classes "setShape" method
		// overrideSize: Boolean: set the size explicitly, if true
		if(!this.rawNode) return null;
		var shape = new shapeType(),
			node = this.rawNode.ownerDocument.createElement('v:' + shapeType.nodeType);
		shape.setRawNode(node);
		this.rawNode.appendChild(node);
		switch(shapeType){
			case dojox.gfx.Group:
			case dojox.gfx.Line:
			case dojox.gfx.Polyline:
			case dojox.gfx.Text:
			case dojox.gfx.Path:
			case dojox.gfx.TextPath:
				this._overrideSize(node);
		}
		shape.setShape(rawShape);
		this.add(shape);
		return shape;	// dojox.gfx.Shape
	},
	_overrideSize: function(node){
		var p = this;
		while(p && !(p instanceof dojox.gfx.Surface)){ p = p.parent; }
		node.style.width  = p.width;
		node.style.height = p.height;
		node.coordsize = p.width + " " + p.height;
	}
});

dojo.extend(dojox.gfx.Group, dojox.gfx.vml.Container);
dojo.extend(dojox.gfx.Group, dojox.gfx.shape.Creator);

dojo.extend(dojox.gfx.Surface, dojox.gfx.vml.Container);
dojo.extend(dojox.gfx.Surface, dojox.gfx.shape.Creator);

}