silverlight.js

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

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

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

dojo.experimental("dojox.gfx.silverlight");

dojox.gfx.silverlight.dasharray = {
	solid:				"none",
	shortdash:			[4, 1],
	shortdot:			[1, 1],
	shortdashdot:		[4, 1, 1, 1],
	shortdashdotdot:	[4, 1, 1, 1, 1, 1],
	dot:				[1, 3],
	dash:				[4, 3],
	longdash:			[8, 3],
	dashdot:			[4, 3, 1, 3],
	longdashdot:		[8, 3, 1, 3],
	longdashdotdot:		[8, 3, 1, 3, 1, 3]
};

dojox.gfx.silverlight.fontweight = {
	normal: 400,
	bold:   700
};

dojox.gfx.silverlight.caps  = {butt: "Flat", round: "Round", square: "Square"};
dojox.gfx.silverlight.joins = {bevel: "Bevel", round: "Round"};

dojox.gfx.silverlight.fonts = {
	serif: "Times New Roman",
	times: "Times New Roman",
	"sans-serif": "Arial",
	helvetica: "Arial",
	monotone: "Courier New",
	courier: "Courier New"
};

dojox.gfx.silverlight.hexColor = function(/*String|Array|dojo.Color*/ color){
	// summary: converts a color object to a Silverlight hex color string (#aarrggbb)
	var c = dojox.gfx.normalizeColor(color),
		t = c.toHex(), a = Math.round(c.a * 255);
	a = (a < 0 ? 0 : a > 255 ? 255 : a).toString(16);
	return "#" + (a.length < 2 ? "0" + a : a) + t.slice(1);	// String
};

dojo.extend(dojox.gfx.Shape, {
	// summary: Silverlight-specific implementation of dojox.gfx.Shape methods
	
	setFill: function(fill){
		// summary: sets a fill object (Silverlight)
		// fill: Object: a fill object
		//	(see dojox.gfx.defaultLinearGradient, 
		//	dojox.gfx.defaultRadialGradient, 
		//	dojox.gfx.defaultPattern, 
		//	or dojo.Color)

		var p = this.rawNode.getHost().content, r = this.rawNode, f;
		if(!fill){
			// don't fill
			this.fillStyle = null;
			this._setFillAttr(null);
			return this;	// self
		}
		if(typeof(fill) == "object" && "type" in fill){
			// gradient
			switch(fill.type){
				case "linear":
					this.fillStyle = f = dojox.gfx.makeParameters(dojox.gfx.defaultLinearGradient, fill);
					var lgb = p.createFromXaml("<LinearGradientBrush/>");
					lgb.mappingMode = "Absolute";
					lgb.startPoint = f.x1 + "," + f.y1;
					lgb.endPoint = f.x2 + "," + f.y2;
					dojo.forEach(f.colors, function(c){
						var t = p.createFromXaml("<GradientStop/>");
						t.offset = c.offset;
						t.color = dojox.gfx.silverlight.hexColor(c.color);
						lgb.gradientStops.add(t);
					});
					this._setFillAttr(lgb);
					break;
				case "radial":
					this.fillStyle = f = dojox.gfx.makeParameters(dojox.gfx.defaultRadialGradient, fill);
					var rgb = p.createFromXaml("<RadialGradientBrush/>"), w = r.width, h = r.height,
						l = this.rawNode["Canvas.Left"], t = this.rawNode["Canvas.Top"];
					rgb.center = (f.cx - l) / w + "," + (f.cy - t) / h;
					rgb.radiusX = f.r / w;
					rgb.radiusY = f.r / h;
					dojo.forEach(f.colors, function(c){
						var t = p.createFromXaml("<GradientStop/>");
						t.offset = c.offset;
						t.color = dojox.gfx.silverlight.hexColor(c.color);
						rgb.gradientStops.add(t);
					});
					this._setFillAttr(rgb);
					break;
				case "pattern":
					// don't fill: Silverlight doesn't define TileBrush for some reason
					this.fillStyle = null;
					this._setFillAttr(null);
					break;
			}
			return this;	// self
		}
		// color object
		this.fillStyle = f = dojox.gfx.normalizeColor(fill);
		var scb = p.createFromXaml("<SolidColorBrush/>");
		scb.color = f.toHex();
		scb.opacity = f.a;
		this._setFillAttr(scb);
		return this;	// self
	},
	_setFillAttr: function(f){
		this.rawNode.fill = f;
	},

	setStroke: function(stroke){
		// summary: sets a stroke object (Silverlight)
		// stroke: Object: a stroke object
		//	(see dojox.gfx.defaultStroke) 
	
		var p = this.rawNode.getHost().content, r = this.rawNode;
		if(!stroke){
			// don't stroke
			this.strokeStyle = null;
			r.stroke = null;
			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
		if(s){
			var scb = p.createFromXaml("<SolidColorBrush/>");
			scb.color = s.color.toHex();
			scb.opacity = s.color.a;
			r.stroke = scb;
			r.strokeThickness = s.width;
			r.strokeStartLineCap = r.strokeEndLineCap = r.strokeDashCap = 
				dojox.gfx.silverlight.caps[s.cap];
			if(typeof s.join == "number"){
				r.strokeLineJoin = "Miter";
				r.strokeMiterLimit = s.join;
			}else{
				r.strokeLineJoin = dojox.gfx.silverlight.joins[s.join];
			}
			var da = s.style.toLowerCase();
			if(da in dojox.gfx.silverlight.dasharray){ da = dojox.gfx.silverlight.dasharray[da]; }
			if(da instanceof Array){
				da = dojo.clone(da);
				/*
				for(var i = 0; i < da.length; ++i){
					da[i] *= s.width;
				}
				*/
				if(s.cap != "butt"){
					for(var i = 0; i < da.length; i += 2){
						//da[i] -= s.width;
						--da[i]
						if(da[i] < 1){ da[i] = 1; }
					}
					for(var i = 1; i < da.length; i += 2){
						//da[i] += s.width;
						++da[i];
					}
				}
				r.strokeDashArray = da.join(",");
			}else{
				r.strokeDashArray = null;
			}
		}
		return this;	// self
	},
	
	_getParentSurface: function(){
		var surface = this.parent;
		for(; surface && !(surface instanceof dojox.gfx.Surface); surface = surface.parent);
		return surface;
	},
	
	_applyTransform: function() {
		var tm = this.matrix, r = this.rawNode;
		if(tm){
			var p = this.rawNode.getHost().content,
				m = p.createFromXaml("<MatrixTransform/>"),
				mm = p.createFromXaml("<Matrix/>");
			mm.m11 = tm.xx;
			mm.m21 = tm.xy;
			mm.m12 = tm.yx;
			mm.m22 = tm.yy;
			mm.offsetX = tm.dx;
			mm.offsetY = tm.dy;
			m.matrix = mm;
			r.renderTransform = m;
		}else{
			r.renderTransform = null;
		}
		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.fill = null;
		rawNode.stroke = null;
		this.rawNode = rawNode;
	},
	
	// move family

	_moveToFront: function(){
		// summary: moves a shape to front of its parent's list of shapes (Silverlight)
		var c = this.parent.rawNode.children, r = this.rawNode;
		c.remove(r);
		c.add(r);
		return this;	// self
	},
	_moveToBack: function(){
		// summary: moves a shape to back of its parent's list of shapes (Silverlight)
		var c = this.parent.rawNode.children, r = this.rawNode;
		c.remove(r);
		c.insert(0, r);
		return this;	// self
	}
});

dojo.declare("dojox.gfx.Group", dojox.gfx.Shape, {
	// summary: a group shape (Silverlight), which can be used 
	//	to logically group shapes (e.g, to propagate matricies)
	constructor: function(){
		dojox.gfx.silverlight.Container._init.call(this);
	},
	setRawNode: function(rawNode){
		// summary: sets a raw Silverlight node to be used by this shape
		// rawNode: Node: an Silverlight node
		this.rawNode = rawNode;
	}
});
dojox.gfx.Group.nodeType = "Canvas";

dojo.declare("dojox.gfx.Rect", dojox.gfx.shape.Rect, {
	// summary: a rectangle shape (Silverlight)
	setShape: function(newShape){
		// summary: sets a rectangle shape object (Silverlight)
		// newShape: Object: a rectangle shape object
		this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		var r = this.rawNode, n = this.shape;
		r["Canvas.Left"] = n.x;
		r["Canvas.Top"]  = n.y;
		r.width   = n.width;
		r.height  = n.height;
		r.radiusX = r.radiusY = n.r;
		return this;	// self
	}
});
dojox.gfx.Rect.nodeType = "Rectangle";

dojo.declare("dojox.gfx.Ellipse", dojox.gfx.shape.Ellipse, {
	// summary: an ellipse shape (Silverlight)
	setShape: function(newShape){
		// summary: sets an ellipse shape object (Silverlight)
		// newShape: Object: an ellipse shape object
		this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		var r = this.rawNode, n = this.shape;
		r["Canvas.Left"] = n.cx - n.rx;
		r["Canvas.Top"]  = n.cy - n.ry;
		r.width  = 2 * n.rx;
		r.height = 2 * n.ry;
		return this;	// self
	}
});
dojox.gfx.Ellipse.nodeType = "Ellipse";

dojo.declare("dojox.gfx.Circle", dojox.gfx.shape.Circle, {
	// summary: a circle shape (Silverlight)
	setShape: function(newShape){
		// summary: sets a circle shape object (Silverlight)
		// newShape: Object: a circle shape object
		this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		var r = this.rawNode, n = this.shape;
		r["Canvas.Left"] = n.cx - n.r;
		r["Canvas.Top"]  = n.cy - n.r;
		r.width = r.height = 2 * n.r;
		return this;	// self
	}
});
dojox.gfx.Circle.nodeType = "Ellipse";

dojo.declare("dojox.gfx.Line", dojox.gfx.shape.Line, {
	// summary: a line shape (Silverlight)
	setShape: function(newShape){
		// summary: sets a line shape object (Silverlight)
		// newShape: Object: a line shape object
		this.shape = dojox.gfx.makeParameters(this.shape, newShape);
		this.bbox = null;
		var r = this.rawNode, n = this.shape;
		r.x1 = n.x1; r.y1 = n.y1; r.x2 = n.x2; r.y2 = n.y2;
		return this;	// self
	}
});
dojox.gfx.Line.nodeType = "Line";

dojo.declare("dojox.gfx.Polyline", dojox.gfx.shape.Polyline, {
	// summary: a polyline/polygon shape (Silverlight)
	setShape: function(points, closed){
		// summary: sets a polyline/polygon shape object (Silverlight)
		// points: Object: a polyline/polygon shape object
		if(points && points instanceof Array){
			// branch
			// points: Array: an array of points
			this.shape = dojox.gfx.makeParameters(this.shape, {points: points});
			if(closed && this.shape.points.length){ 
				this.shape.points.push(this.shape.points[0]);
			}
		}else{
			this.shape = dojox.gfx.makeParameters(this.shape, points);
		}
		this.box = null;
		var p = this.shape.points, rp = [];
		for(var i = 0; i < p.length; ++i){
			if(typeof p[i] == "number"){
				rp.push(p[i], p[++i]);
			}else{
				rp.push(p[i].x, p[i].y);
			}
		}
		this.rawNode.points = rp.join(",");
		return this;	// self
	}
});
dojox.gfx.Polyline.nodeType = "Polyline";

dojo.declare("dojox.gfx.Image", dojox.gfx.shape.Image, {
	// summary: an image (Silverlight)
	setShape: function(newShape){
		// summary: sets an image shape object (Silverlight)