Permalink
Browse files

Cache the processStyle and processLineCap results. When animating it …

…is very likely that we will end up recalculating the same values.

git-svn-id: https://explorercanvas.googlecode.com/svn/trunk@73 fd59bba8-8519-0410-9389-e36bf2bdbbd6
  • Loading branch information...
erik.arvidsson@gmail.com
erik.arvidsson@gmail.com committed Mar 21, 2010
1 parent 2bf5472 commit f45234ed727c849319ad1f1776bd54314c09742d
Showing with 33 additions and 33 deletions.
  1. +33 −33 excanvas.js
View
@@ -447,7 +447,13 @@ if (!document.createElement('canvas').getContext) {
return m1;
}
+ var processStyleCache = {};
+
function processStyle(styleString) {
+ if (styleString in processStyleCache) {
+ return processStyleCache[styleString];
+ }
+
var str, alpha = 1;
styleString = String(styleString);
@@ -472,7 +478,7 @@ if (!document.createElement('canvas').getContext) {
} else {
str = colorData[styleString] || styleString;
}
- return {color: str, alpha: alpha};
+ return processStyleCache[styleString] = {color: str, alpha: alpha};
}
var DEFAULT_STYLE = {
@@ -545,16 +551,13 @@ if (!document.createElement('canvas').getContext) {
style.size + 'px ' + style.family;
}
+ var lineCapMap = {
+ 'butt': 'flat',
+ 'round': 'round'
+ };
+
function processLineCap(lineCap) {
- switch (lineCap) {
- case 'butt':
- return 'flat';
- case 'round':
- return 'round';
- case 'square':
- default:
- return 'square';
- }
+ return lineCapMap[lineCap] || 'square';
}
/**
@@ -618,14 +621,14 @@ if (!document.createElement('canvas').getContext) {
};
contextPrototype.moveTo = function(aX, aY) {
- var p = this.getCoords_(aX, aY);
+ var p = getCoords(this, aX, aY);
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
this.currentX_ = p.x;
this.currentY_ = p.y;
};
contextPrototype.lineTo = function(aX, aY) {
- var p = this.getCoords_(aX, aY);
+ var p = getCoords(this, aX, aY);
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
this.currentX_ = p.x;
@@ -635,9 +638,9 @@ if (!document.createElement('canvas').getContext) {
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
aCP2x, aCP2y,
aX, aY) {
- var p = this.getCoords_(aX, aY);
- var cp1 = this.getCoords_(aCP1x, aCP1y);
- var cp2 = this.getCoords_(aCP2x, aCP2y);
+ var p = getCoords(this, aX, aY);
+ var cp1 = getCoords(this, aCP1x, aCP1y);
+ var cp2 = getCoords(this, aCP2x, aCP2y);
bezierCurveTo(this, cp1, cp2, p);
};
@@ -660,8 +663,8 @@ if (!document.createElement('canvas').getContext) {
// the following is lifted almost directly from
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
- var cp = this.getCoords_(aCPx, aCPy);
- var p = this.getCoords_(aX, aY);
+ var cp = getCoords(this, aCPx, aCPy);
+ var p = getCoords(this, aX, aY);
var cp1 = {
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
@@ -692,9 +695,9 @@ if (!document.createElement('canvas').getContext) {
// that can be represented in binary
}
- var p = this.getCoords_(aX, aY);
- var pStart = this.getCoords_(xStart, yStart);
- var pEnd = this.getCoords_(xEnd, yEnd);
+ var p = getCoords(this, aX, aY);
+ var pStart = getCoords(this, xStart, yStart);
+ var pEnd = getCoords(this, xEnd, yEnd);
this.currentPath_.push({type: arcType,
x: p.x,
@@ -808,7 +811,7 @@ if (!document.createElement('canvas').getContext) {
throw Error('Invalid number of arguments');
}
- var d = this.getCoords_(dx, dy);
+ var d = getCoords(this, dx, dy);
var w2 = sw / 2;
var h2 = sh / 2;
@@ -844,9 +847,9 @@ if (!document.createElement('canvas').getContext) {
// Bounding box calculation (need to minimize displayed area so that
// filters don't waste time on unused pixels.
var max = d;
- var c2 = this.getCoords_(dx + dw, dy);
- var c3 = this.getCoords_(dx, dy + dh);
- var c4 = this.getCoords_(dx + dw, dy + dh);
+ var c2 = getCoords(this, dx + dw, dy);
+ var c3 = getCoords(this, dx, dy + dh);
+ var c4 = getCoords(this, dx + dw, dy + dh);
max.x = m.max(max.x, c2.x, c3.x, c4.x);
max.y = m.max(max.y, c2.y, c3.y, c4.y);
@@ -1004,8 +1007,8 @@ if (!document.createElement('canvas').getContext) {
var y0 = fillStyle.y0_ / arcScaleY;
var x1 = fillStyle.x1_ / arcScaleX;
var y1 = fillStyle.y1_ / arcScaleY;
- var p0 = ctx.getCoords_(x0, y0);
- var p1 = ctx.getCoords_(x1, y1);
+ var p0 = getCoords(ctx, x0, y0);
+ var p1 = getCoords(ctx, x1, y1);
var dx = p1.x - p0.x;
var dy = p1.y - p0.y;
angle = Math.atan2(dx, dy) * 180 / Math.PI;
@@ -1021,7 +1024,7 @@ if (!document.createElement('canvas').getContext) {
angle = 0;
}
} else {
- var p0 = ctx.getCoords_(fillStyle.x0_, fillStyle.y0_);
+ var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
focus = {
x: (p0.x - min.x) / width,
y: (p0.y - min.y) / height
@@ -1094,11 +1097,8 @@ if (!document.createElement('canvas').getContext) {
this.currentPath_.push({type: 'close'});
};
- /**
- * @private
- */
- contextPrototype.getCoords_ = function(aX, aY) {
- var m = this.m_;
+ function getCoords(ctx, aX, aY) {
+ var m = ctx.m_;
return {
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
@@ -1259,7 +1259,7 @@ if (!document.createElement('canvas').getContext) {
break;
}
- var d = this.getCoords_(x + offset.x, y + offset.y);
+ var d = getCoords(this, x + offset.x, y + offset.y);
lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
' coordsize="100 100" coordorigin="0 0"',

0 comments on commit f45234e

Please sign in to comment.