source: [view]
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 d = dojo, g = dojox.gfx, gs = g.shape, ga = g.arc, canvas = g.canvas,
m = g.matrix, mp = m.multiplyPoint, pi = Math.PI, twoPI = 2 * pi, halfPI = pi /2,
pattrnbuffer = null;
d.declare("dojox.gfx.canvas.Shape", gs.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){
var fs = this.fillStyle;
if("canvasFillImage" in this){
var w = fs.width, h = fs.height,
iw = this.canvasFillImage.width, ih = this.canvasFillImage.height,
// let's match the svg default behavior wrt. aspect ratio: xMidYMid meet
sx = w == iw ? 1 : w / iw,
sy = h == ih ? 1 : h / ih,
s = Math.min(sx,sy), //meet->math.min , slice->math.max
dx = (w - s * iw)/2,
dy = (h - s * ih)/2;
// the buffer used to scaled the image
pattrnbuffer.width = w; pattrnbuffer.height = h;
var copyctx = pattrnbuffer.getContext("2d");
copyctx.clearRect(0, 0, w, h);
copyctx.drawImage(this.canvasFillImage, 0, 0, iw, ih, dx, dy, s*iw, s*ih);
this.canvasFill = ctx.createPattern(pattrnbuffer, "repeat");
delete this.canvasFillImage;
}
ctx.fillStyle = this.canvasFill;
if(apply){
// offset the pattern
if (fs.type==="pattern" && (fs.x !== 0 || fs.y !== 0)) {
ctx.translate(fs.x,fs.y);
}
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(canvas.Shape, "setTransform",
function(){
// prepare Canvas-specific structures
if(this.matrix){
this.canvasTransform = g.decompose(this.matrix);
}else{
delete this.canvasTransform;
}
});
modifyMethod(canvas.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);
d.forEach(fs.colors, function(step){
f.addColorStop(step.offset, g.normalizeColor(step.color).toString());
});
break;
case "pattern":
if (!pattrnbuffer) {
pattrnbuffer = document.createElement("canvas");
}
// no need to scale the image since the canvas.createPattern uses
// the original image data and not the scaled ones (see spec.)
// the scaling needs to be done at rendering time in a context buffer
var img =new Image();
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(canvas.Shape, "setStroke");
modifyMethod(canvas.Shape, "setShape");
dojo.declare("dojox.gfx.canvas.Group", canvas.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);
for(var i = 0; i < this.children.length; ++i){
this.children[i]._render(ctx);
}
ctx.restore();
}
});
dojo.declare("dojox.gfx.canvas.Rect", [canvas.Shape, 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, 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.canvas.Ellipse", [canvas.Shape, gs.Ellipse], {
// summary: an ellipse shape (Canvas)
setShape: function(){
this.inherited(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.canvas.Circle", [canvas.Shape, 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.canvas.Line", [canvas.Shape, 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.canvas.Polyline", [canvas.Shape, gs.Polyline], {
// summary: a polyline/polygon shape (Canvas)
setShape: function(){
this.inherited(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.canvas.Image", [canvas.Shape, gs.Image], {
// summary: an image shape (Canvas)
setShape: function(){
this.inherited(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.canvas.Text", [canvas.Shape, gs.Text], {
_setFont:function(){
if (this.fontStyle){
this.canvasFont = g.makeFontString(this.fontStyle);
} else {
delete this.canvasFont;
}
},
getTextWidth: function(){
// summary: get the text width in pixels
var s = this.shape, w = 0, ctx;
if(s.text && s.text.length > 0){
ctx = this.surface.rawNode.getContext("2d");
ctx.save();
this._renderTransform(ctx);
this._renderFill(ctx, false);
this._renderStroke(ctx, false);
if (this.canvasFont)
ctx.font = this.canvasFont;
w = ctx.measureText(s.text).width;
ctx.restore();
}
return w;
},
// override to apply first fill and stroke (
// the base implementation is for path-based shape that needs to first define the path then to fill/stroke it.
// Here, we need the fillstyle or strokestyle to be set before calling fillText/strokeText.
_render: function(/* Object */ctx){
// summary: render the shape
// ctx : Object: the drawing context.
ctx.save();
this._renderTransform(ctx);
this._renderFill(ctx, false);
this._renderStroke(ctx, false);
this._renderShape(ctx);
ctx.restore();
},
_renderShape: function(ctx){
// summary: a text shape (Canvas)
// ctx : Object: the drawing context.
var ta, s = this.shape;
if(!s.text || s.text.length == 0){
return;
}
// text align
ta = s.align === 'middle' ? 'center' : s.align;
ctx.textAlign = ta;
if(this.canvasFont){
ctx.font = this.canvasFont;
}
if(this.canvasFill){
ctx.fillText(s.text, s.x, s.y);
}
if(this.strokeStyle){
ctx.beginPath(); // fix bug in FF3.6. Fixed in FF4b8
ctx.strokeText(s.text, s.x, s.y);
ctx.closePath();
}
}
});
modifyMethod(canvas.Text, "setFont");
// the next test is from https://github.com/phiggins42/has.js
if(typeof dojo.doc.createElement("canvas").getContext("2d").fillText != "function"){
canvas.Text.extend({
getTextWidth: function(){
return 0;
},
_renderShape: function(){}
});
}
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.canvas.Path", [canvas.Shape, g.path.Path], {
// summary: a path shape (Canvas)
constructor: function(){
this.lastControl = {};
},
setShape: function(){
this.canvasPath = [];
return this.inherited(arguments);
},
_updateWithSegment: function(segment){
var last = d.clone(this.last);
this[pathRenderers[segment.action]](this.canvasPath, segment.action, segment.args);
this.last = last;
this.inherited(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
);
d.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 = {};
}
});
d.forEach(["moveTo", "lineTo", "hLineTo", "vLineTo", "curveTo",
"smoothCurveTo", "qCurveTo", "qSmoothCurveTo", "arcTo", "closePath"],
function(method){ modifyMethod(canvas.Path, method); }
);
dojo.declare("dojox.gfx.canvas.TextPath", [canvas.Shape, g.path.TextPath], {
// summary: a text shape (Canvas)
_renderShape: function(/* Object */ ctx){
var s = this.shape;
// nothing for the moment
},
_setText: function(){
// not implemented
},
_setFont: function(){
// not implemented