diff options
Diffstat (limited to 'includes/js/dojox/gfx/canvas.js')
| -rw-r--r-- | includes/js/dojox/gfx/canvas.js | 687 |
1 files changed, 687 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/canvas.js b/includes/js/dojox/gfx/canvas.js new file mode 100644 index 0000000..6872b2f --- /dev/null +++ b/includes/js/dojox/gfx/canvas.js @@ -0,0 +1,687 @@ +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, pi = Math.PI, twoPI = 2 * pi, halfPI = pi /2; + + 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); + if(r){ + ctx.arc(xr2, yt2, r, -halfPI, 0, false); + ctx.arc(xr2, yb2, r, 0, halfPI, false); + ctx.arc(xl2, yb2, r, halfPI, pi, false); + ctx.arc(xl2, yt2, r, pi, halfPI, false); + }else{ + ctx.lineTo(xr2, yt); + ctx.lineTo(xr, yb2); + ctx.lineTo(xl2, yb); + ctx.lineTo(xl, yt2); + } + 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); + // dojo.inherited("setShape", 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){ + // console.debug("Polyline::_renderShape"); + 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); +})(); + +} |