canvas.js
No OneTemporary
Actions

Size

19 KB

Subscribers

None

canvas.js
View Options

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

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

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

	(function(){
	var g = dojox.gfx, gs = g.shape, ga = g.arc,
	m = g.matrix, mp = m.multiplyPoint, twoPI = 2 * Math.PI;

	dojo.extend(g.Shape, {
	render: function(/* Object */ ctx){
	// summary: render the shape
	ctx.save();
	this._renderTransform(ctx);
	this._renderShape(ctx);
	this._renderFill(ctx, true);
	this._renderStroke(ctx, true);
	ctx.restore();
	},
	_renderTransform: function(/* Object */ ctx){
	if("canvasTransform" in this){
	var t = this.canvasTransform;
	ctx.translate(t.dx, t.dy);
	ctx.rotate(t.angle2);
	ctx.scale(t.sx, t.sy);
	ctx.rotate(t.angle1);
	// The future implementation when vendors catch up with the spec:
	// var t = this.matrix;
	// ctx.transform(t.xx, t.yx, t.xy, t.yy, t.dx, t.dy);
	}
	},
	_renderShape: function(/* Object */ ctx){
	// nothing
	},
	_renderFill: function(/* Object / ctx, / Boolean */ apply){
	if("canvasFill" in this){
	if("canvasFillImage" in this){
	this.canvasFill = ctx.createPattern(this.canvasFillImage, "repeat");
	delete this.canvasFillImage;
	}
	ctx.fillStyle = this.canvasFill;
	if(apply){ ctx.fill(); }
	}else{
	ctx.fillStyle = "rgba(0,0,0,0.0)";
	}
	},
	_renderStroke: function(/* Object / ctx, / Boolean */ apply){
	var s = this.strokeStyle;
	if(s){
	ctx.strokeStyle = s.color.toString();
	ctx.lineWidth = s.width;
	ctx.lineCap = s.cap;
	if(typeof s.join == "number"){
	ctx.lineJoin = "miter";
	ctx.miterLimit = s.join;
	}else{
	ctx.lineJoin = s.join;
	}
	if(apply){ ctx.stroke(); }
	}else if(!apply){
	ctx.strokeStyle = "rgba(0,0,0,0.0)";
	}
	},

	// events are not implemented
	getEventSource: function(){ return null; },
	connect: function(){},
	disconnect: function(){}
	});

	var modifyMethod = function(shape, method, extra){
	var old = shape.prototype[method];
	shape.prototype[method] = extra ?
	function(){
	this.surface.makeDirty();
	old.apply(this, arguments);
	extra.call(this);
	return this;
	} :
	function(){
	this.surface.makeDirty();
	return old.apply(this, arguments);
	};
	};

	modifyMethod(g.Shape, "setTransform",
	function(){
	// prepare Canvas-specific structures
	if(this.matrix){
	this.canvasTransform = g.decompose(this.matrix);
	}else{
	delete this.canvasTransform;
	}
	});

	modifyMethod(g.Shape, "setFill",
	function(){
	// prepare Canvas-specific structures
	var fs = this.fillStyle, f;
	if(fs){
	if(typeof(fs) == "object" && "type" in fs){
	var ctx = this.surface.rawNode.getContext("2d");
	switch(fs.type){
	case "linear":
	case "radial":
	f = fs.type == "linear" ?
	ctx.createLinearGradient(fs.x1, fs.y1, fs.x2, fs.y2) :
	ctx.createRadialGradient(fs.cx, fs.cy, 0, fs.cx, fs.cy, fs.r);
	dojo.forEach(fs.colors, function(step){
	f.addColorStop(step.offset, g.normalizeColor(step.color).toString());
	});
	break;
	case "pattern":
	var img = new Image(fs.width, fs.height);
	this.surface.downloadImage(img, fs.src);
	this.canvasFillImage = img;
	}
	}else{
	// Set fill color using CSS RGBA func style
	f = fs.toString();
	}
	this.canvasFill = f;
	}else{
	delete this.canvasFill;
	}
	});

	modifyMethod(g.Shape, "setStroke");
	modifyMethod(g.Shape, "setShape");

	dojo.declare("dojox.gfx.Group", g.Shape, {
	// summary: a group shape (Canvas), which can be used
	// to logically group shapes (e.g, to propagate matricies)
	constructor: function(){
	gs.Container._init.call(this);
	},
	render: function(/* Object */ ctx){
	// summary: render the group
	ctx.save();
	this._renderTransform(ctx);
	this._renderFill(ctx);
	this._renderStroke(ctx);
	for(var i = 0; i < this.children.length; ++i){
	this.children[i].render(ctx);
	}
	ctx.restore();
	}
	});

	dojo.declare("dojox.gfx.Rect", gs.Rect, {
	// summary: a rectangle shape (Canvas)
	_renderShape: function(/* Object */ ctx){
	var s = this.shape, r = Math.min(s.r, s.height / 2, s.width / 2),
	xl = s.x, xr = xl + s.width, yt = s.y, yb = yt + s.height,
	xl2 = xl + r, xr2 = xr - r, yt2 = yt + r, yb2 = yb - r;
	ctx.beginPath();
	ctx.moveTo(xl2, yt);
	ctx.lineTo(xr2, yt);
	if(r){ ctx.arcTo(xr, yt, xr, yt2, r); }
	ctx.lineTo(xr, yb2);
	if(r){ ctx.arcTo(xr, yb, xr2, yb, r); }
	ctx.lineTo(xl2, yb);
	if(r){ ctx.arcTo(xl, yb, xl, yb2, r); }
	ctx.lineTo(xl, yt2);
	if(r){ ctx.arcTo(xl, yt, xl2, yt, r); }
	ctx.closePath();
	}
	});

	var bezierCircle = [];
	(function(){
	var u = ga.curvePI4;
	bezierCircle.push(u.s, u.c1, u.c2, u.e);
	for(var a = 45; a < 360; a += 45){
	var r = m.rotateg(a);
	bezierCircle.push(mp(r, u.c1), mp(r, u.c2), mp(r, u.e));
	}
	})();

	dojo.declare("dojox.gfx.Ellipse", gs.Ellipse, {
	// summary: an ellipse shape (Canvas)
	setShape: function(){
	g.Ellipse.superclass.setShape.apply(this, arguments);
	// prepare Canvas-specific structures
	var s = this.shape, t, c1, c2, r = [],
	M = m.normalize([m.translate(s.cx, s.cy), m.scale(s.rx, s.ry)]);
	t = mp(M, bezierCircle[0]);
	r.push([t.x, t.y]);
	for(var i = 1; i < bezierCircle.length; i += 3){
	c1 = mp(M, bezierCircle[i]);
	c2 = mp(M, bezierCircle[i + 1]);
	t = mp(M, bezierCircle[i + 2]);
	r.push([c1.x, c1.y, c2.x, c2.y, t.x, t.y]);
	}
	this.canvasEllipse = r;
	return this;
	},
	_renderShape: function(/* Object */ ctx){
	var r = this.canvasEllipse;
	ctx.beginPath();
	ctx.moveTo.apply(ctx, r[0]);
	for(var i = 1; i < r.length; ++i){
	ctx.bezierCurveTo.apply(ctx, r[i]);
	}
	ctx.closePath();
	}
	});

	dojo.declare("dojox.gfx.Circle", gs.Circle, {
	// summary: a circle shape (Canvas)
	_renderShape: function(/* Object */ ctx){
	var s = this.shape;
	ctx.beginPath();
	ctx.arc(s.cx, s.cy, s.r, 0, twoPI, 1);
	}
	});

	dojo.declare("dojox.gfx.Line", gs.Line, {
	// summary: a line shape (Canvas)
	_renderShape: function(/* Object */ ctx){
	var s = this.shape;
	ctx.beginPath();
	ctx.moveTo(s.x1, s.y1);
	ctx.lineTo(s.x2, s.y2);
	}
	});

	dojo.declare("dojox.gfx.Polyline", gs.Polyline, {
	// summary: a polyline/polygon shape (Canvas)
	setShape: function(){
	g.Polyline.superclass.setShape.apply(this, arguments);
	// prepare Canvas-specific structures
	var p = this.shape.points, f = p[0], r = [], c, i;
	if(p.length){
	if(typeof f == "number"){
	r.push(f, p[1]);
	i = 2;
	}else{
	r.push(f.x, f.y);
	i = 1;
	}
	for(; i < p.length; ++i){
	c = p[i];
	if(typeof c == "number"){
	r.push(c, p[++i]);
	}else{
	r.push(c.x, c.y);
	}
	}
	}
	this.canvasPolyline = r;
	return this;
	},
	_renderShape: function(/* Object */ ctx){
	var p = this.canvasPolyline;
	if(p.length){
	ctx.beginPath();
	ctx.moveTo(p[0], p[1]);
	for(var i = 2; i < p.length; i += 2){
	ctx.lineTo(p[i], p[i + 1]);
	}
	}
	}
	});

	dojo.declare("dojox.gfx.Image", gs.Image, {
	// summary: an image shape (Canvas)
	setShape: function(){
	g.Image.superclass.setShape.apply(this, arguments);
	// prepare Canvas-specific structures
	var img = new Image();
	this.surface.downloadImage(img, this.shape.src);
	this.canvasImage = img;
	return this;
	},
	_renderShape: function(/* Object */ ctx){
	var s = this.shape;
	ctx.drawImage(this.canvasImage, s.x, s.y, s.width, s.height);
	}
	});

	dojo.declare("dojox.gfx.Text", gs.Text, {
	// summary: a text shape (Canvas)
	_renderShape: function(/* Object */ ctx){
	var s = this.shape;
	// nothing for the moment
	}
	});
	modifyMethod(g.Text, "setFont");

	var pathRenderers = {
	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"
	};

	dojo.declare("dojox.gfx.Path", g.path.Path, {
	// summary: a path shape (Canvas)
	constructor: function(){
	this.last = {};
	this.lastControl = {};
	},
	setShape: function(){
	this.canvasPath = [];
	return g.Path.superclass.setShape.apply(this, arguments);
	},
	_updateWithSegment: function(segment){
	var last = dojo.clone(this.last);
	this[pathRenderers[segment.action]](this.canvasPath, segment.action, segment.args);
	this.last = last;
	g.Path.superclass._updateWithSegment.apply(this, arguments);
	},
	_renderShape: function(/* Object */ ctx){
	var r = this.canvasPath;
	ctx.beginPath();
	for(var i = 0; i < r.length; i += 2){
	ctx[r[i]].apply(ctx, r[i + 1]);
	}
	},
	_moveToA: function(result, action, args){
	result.push("moveTo", [args[0], args[1]]);
	for(var i = 2; i < args.length; i += 2){
	result.push("lineTo", [args[i], args[i + 1]]);
	}
	this.last.x = args[args.length - 2];
	this.last.y = args[args.length - 1];
	this.lastControl = {};
	},
	_moveToR: function(result, action, args){
	if("x" in this.last){
	result.push("moveTo", [this.last.x += args[0], this.last.y += args[1]]);
	}else{
	result.push("moveTo", [this.last.x = args[0], this.last.y = args[1]]);
	}
	for(var i = 2; i < args.length; i += 2){
	result.push("lineTo", [this.last.x += args[i], this.last.y += args[i + 1]]);
	}
	this.lastControl = {};
	},
	_lineToA: function(result, action, args){
	for(var i = 0; i < args.length; i += 2){
	result.push("lineTo", [args[i], args[i + 1]]);
	}
	this.last.x = args[args.length - 2];
	this.last.y = args[args.length - 1];
	this.lastControl = {};
	},
	_lineToR: function(result, action, args){
	for(var i = 0; i < args.length; i += 2){
	result.push("lineTo", [this.last.x += args[i], this.last.y += args[i + 1]]);
	}
	this.lastControl = {};
	},
	_hLineToA: function(result, action, args){
	for(var i = 0; i < args.length; ++i){
	result.push("lineTo", [args[i], this.last.y]);
	}
	this.last.x = args[args.length - 1];
	this.lastControl = {};
	},
	_hLineToR: function(result, action, args){
	for(var i = 0; i < args.length; ++i){
	result.push("lineTo", [this.last.x += args[i], this.last.y]);
	}
	this.lastControl = {};
	},
	_vLineToA: function(result, action, args){
	for(var i = 0; i < args.length; ++i){
	result.push("lineTo", [this.last.x, args[i]]);
	}
	this.last.y = args[args.length - 1];
	this.lastControl = {};
	},
	_vLineToR: function(result, action, args){
	for(var i = 0; i < args.length; ++i){
	result.push("lineTo", [this.last.x, this.last.y += args[i]]);
	}
	this.lastControl = {};
	},
	_curveToA: function(result, action, args){
	for(var i = 0; i < args.length; i += 6){
	result.push("bezierCurveTo", args.slice(i, i + 6));
	}
	this.last.x = args[args.length - 2];
	this.last.y = args[args.length - 1];
	this.lastControl.x = args[args.length - 4];
	this.lastControl.y = args[args.length - 3];
	this.lastControl.type = "C";
	},
	_curveToR: function(result, action, args){
	for(var i = 0; i < args.length; i += 6){
	result.push("bezierCurveTo", [
	this.last.x + args[i],
	this.last.y + args[i + 1],
	this.lastControl.x = this.last.x + args[i + 2],
	this.lastControl.y = this.last.y + args[i + 3],
	this.last.x + args[i + 4],
	this.last.y + args[i + 5]
	]);
	this.last.x += args[i + 4];
	this.last.y += args[i + 5];
	}
	this.lastControl.type = "C";
	},
	_smoothCurveToA: function(result, action, args){
	for(var i = 0; i < args.length; i += 4){
	var valid = this.lastControl.type == "C";
	result.push("bezierCurveTo", [
	valid ? 2 * this.last.x - this.lastControl.x : this.last.x,
	valid ? 2 * this.last.y - this.lastControl.y : this.last.y,
	args[i],
	args[i + 1],
	args[i + 2],
	args[i + 3]
	]);
	this.lastControl.x = args[i];
	this.lastControl.y = args[i + 1];
	this.lastControl.type = "C";
	}
	this.last.x = args[args.length - 2];
	this.last.y = args[args.length - 1];
	},
	_smoothCurveToR: function(result, action, args){
	for(var i = 0; i < args.length; i += 4){
	var valid = this.lastControl.type == "C";
	result.push("bezierCurveTo", [
	valid ? 2 * this.last.x - this.lastControl.x : this.last.x,
	valid ? 2 * this.last.y - this.lastControl.y : this.last.y,
	this.last.x + args[i],
	this.last.y + args[i + 1],
	this.last.x + args[i + 2],
	this.last.y + args[i + 3]
	]);
	this.lastControl.x = this.last.x + args[i];
	this.lastControl.y = this.last.y + args[i + 1];
	this.lastControl.type = "C";
	this.last.x += args[i + 2];
	this.last.y += args[i + 3];
	}
	},
	_qCurveToA: function(result, action, args){
	for(var i = 0; i < args.length; i += 4){
	result.push("quadraticCurveTo", args.slice(i, i + 4));
	}
	this.last.x = args[args.length - 2];
	this.last.y = args[args.length - 1];
	this.lastControl.x = args[args.length - 4];
	this.lastControl.y = args[args.length - 3];
	this.lastControl.type = "Q";
	},
	_qCurveToR: function(result, action, args){
	for(var i = 0; i < args.length; i += 4){
	result.push("quadraticCurveTo", [
	this.lastControl.x = this.last.x + args[i],
	this.lastControl.y = this.last.y + args[i + 1],
	this.last.x + args[i + 2],
	this.last.y + args[i + 3]
	]);
	this.last.x += args[i + 2];
	this.last.y += args[i + 3];
	}
	this.lastControl.type = "Q";
	},
	_qSmoothCurveToA: function(result, action, args){
	for(var i = 0; i < args.length; i += 2){
	var valid = this.lastControl.type == "Q";
	result.push("quadraticCurveTo", [
	this.lastControl.x = valid ? 2 * this.last.x - this.lastControl.x : this.last.x,
	this.lastControl.y = valid ? 2 * this.last.y - this.lastControl.y : this.last.y,
	args[i],
	args[i + 1]
	]);
	this.lastControl.type = "Q";
	}
	this.last.x = args[args.length - 2];
	this.last.y = args[args.length - 1];
	},
	_qSmoothCurveToR: function(result, action, args){
	for(var i = 0; i < args.length; i += 2){
	var valid = this.lastControl.type == "Q";
	result.push("quadraticCurveTo", [
	this.lastControl.x = valid ? 2 * this.last.x - this.lastControl.x : this.last.x,
	this.lastControl.y = valid ? 2 * this.last.y - this.lastControl.y : this.last.y,
	this.last.x + args[i],
	this.last.y + args[i + 1]
	]);
	this.lastControl.type = "Q";
	this.last.x += args[i];
	this.last.y += args[i + 1];
	}
	},
	_arcTo: function(result, action, args){
	var relative = action == "a";
	for(var i = 0; i < args.length; i += 7){
	var x1 = args[i + 5], y1 = args[i + 6];
	if(relative){
	x1 += this.last.x;
	y1 += this.last.y;
	}
	var arcs = ga.arcAsBezier(
	this.last, args[i], args[i + 1], args[i + 2],
	args[i + 3] ? 1 : 0, args[i + 4] ? 1 : 0,
	x1, y1
	);
	dojo.forEach(arcs, function(p){
	result.push("bezierCurveTo", p);
	});
	this.last.x = x1;
	this.last.y = y1;
	}
	this.lastControl = {};
	},
	_closePath: function(result, action, args){
	result.push("closePath", []);
	this.lastControl = {};
	}
	});
	dojo.forEach(["moveTo", "lineTo", "hLineTo", "vLineTo", "curveTo",
	"smoothCurveTo", "qCurveTo", "qSmoothCurveTo", "arcTo", "closePath"],
	function(method){ modifyMethod(g.Path, method); }
	);

	dojo.declare("dojox.gfx.TextPath", g.path.TextPath, {
	// summary: a text shape (Canvas)
	_renderShape: function(/* Object */ ctx){
	var s = this.shape;
	// nothing for the moment
	}
	});

	dojo.declare("dojox.gfx.Surface", gs.Surface, {
	// summary: a surface object to be used for drawings (Canvas)
	constructor: function(){
	gs.Container._init.call(this);
	this.pendingImageCount = 0;
	this.makeDirty();
	},
	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 = g.normalizedLength(width); // in pixels
	this.height = g.normalizedLength(height); // in pixels
	if(!this.rawNode) return this;
	this.rawNode.width = width;
	this.rawNode.height = height;
	this.makeDirty();
	return this; // self
	},
	getDimensions: function(){
	// summary: returns an object with properties "width" and "height"
	return this.rawNode ? {width: this.rawNode.width, height: this.rawNode.height} : null; // Object
	},
	render: function(){
	// summary: render the all shapes
	if(this.pendingImageCount){ return; }
	var ctx = this.rawNode.getContext("2d");
	ctx.save();
	ctx.clearRect(0, 0, this.rawNode.width, this.rawNode.height);
	for(var i = 0; i < this.children.length; ++i){
	this.children[i].render(ctx);
	}
	ctx.restore();
	if("pendingRender" in this){
	clearTimeout(this.pendingRender);
	delete this.pendingRender;
	}
	},
	makeDirty: function(){
	// summary: internal method, which is called when we may need to redraw
	if(!this.pendingImagesCount && !("pendingRender" in this)){
	this.pendingRender = setTimeout(dojo.hitch(this, this.render), 0);
	}
	},
	downloadImage: function(img, url){
	// summary:
	// internal method, which starts an image download and renders, when it is ready
	// img: Image:
	// the image object
	// url: String:
	// the url of the image
	var handler = dojo.hitch(this, this.onImageLoad);
	if(!this.pendingImageCount++ && "pendingRender" in this){
	clearTimeout(this.pendingRender);
	delete this.pendingRender;
	}
	img.onload = handler;
	img.onerror = handler;
	img.onabort = handler;
	img.src = url;
	},
	onImageLoad: function(){
	if(!--this.pendingImageCount){ this.render(); }
	},

	// events are not implemented
	getEventSource: function(){ return null; },
	connect: function(){},
	disconnect: function(){}
	});

	g.createSurface = function(parentNode, width, height){
	// summary: creates a surface (Canvas)
	// 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 g.Surface(),
	p = dojo.byId(parentNode),
	c = p.ownerDocument.createElement("canvas");
	c.width = width;
	c.height = height;
	p.appendChild(c);
	s.rawNode = c;
	s.surface = s;
	return s; // dojox.gfx.Surface
	};

	// Extenders

	var C = gs.Container, Container = {
	add: function(shape){
	this.surface.makeDirty();
	return C.add.apply(this, arguments);
	},
	remove: function(shape, silently){
	this.surface.makeDirty();
	return C.remove.apply(this, arguments);
	},
	clear: function(){
	this.surface.makeDirty();
	return C.clear.apply(this, arguments);
	},
	_moveChildToFront: function(shape){
	this.surface.makeDirty();
	return C._moveChildToFront.apply(this, arguments);
	},
	_moveChildToBack: function(shape){
	this.surface.makeDirty();
	return C._moveChildToBack.apply(this, arguments);
	}
	};

	dojo.mixin(gs.Creator, {
	// summary: Canvas shape creators
	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
	var shape = new shapeType();
	shape.surface = this.surface;
	shape.setShape(rawShape);
	this.add(shape);
	return shape; // dojox.gfx.Shape
	}
	});

	dojo.extend(g.Group, Container);
	dojo.extend(g.Group, gs.Creator);

	dojo.extend(g.Surface, Container);
	dojo.extend(g.Surface, gs.Creator);
	})();

	}

File Metadata

Mime Type: text/plain
Expires: Sat, Feb 22, 20:21 (9 h, 41 m ago)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 24610
Default Alt Text: canvas.js (19 KB)

canvas.jsNo OneTemporaryActions

canvas.jsView Options

File Metadata

Event Timeline

canvas.js
No OneTemporary
Actions

canvas.js
View Options