Merge pull request #3179 from yurydelendik/pr-3171

Cont of #3171, Reusing pattern canvas fixes
This commit is contained in:
Yury Delendik 2013-04-30 10:46:48 -07:00
commit 6b33422418
2 changed files with 97 additions and 63 deletions

View File

@ -57,6 +57,7 @@ function addContextCurrentTransform(ctx) {
ctx._originalScale = ctx.scale;
ctx._originalTranslate = ctx.translate;
ctx._originalTransform = ctx.transform;
ctx._originalSetTransform = ctx.setTransform;
ctx._transformMatrix = [ctx._scaleX, 0, 0, ctx._scaleY, 0, 0];
ctx._transformStack = [];
@ -138,6 +139,12 @@ function addContextCurrentTransform(ctx) {
ctx._originalTransform(a, b, c, d, e, f);
};
ctx.setTransform = function ctxSetTransform(a, b, c, d, e, f) {
this._transformMatrix = [a, b, c, d, e, f];
ctx._originalSetTransform(a, b, c, d, e, f);
};
ctx.rotate = function ctxRotate(angle) {
var cosValue = Math.cos(angle);
var sinValue = Math.sin(angle);

View File

@ -20,6 +20,10 @@
'use strict';
// This global variable is used to minimize the memory usage when patterns are
// used.
var temporaryPatternCanvas = null;
var PatternType = {
AXIAL: 2,
RADIAL: 3
@ -268,23 +272,55 @@ var TilingPattern = (function TilingPatternClosure() {
COLORED: 1,
UNCOLORED: 2
};
var MAX_PATTERN_SIZE = 4096;
var MAX_PATTERN_SIZE = 8192;
function TilingPattern(IR, color, ctx, objs, commonObjs) {
var operatorList = IR[2];
this.name = IR[1][0].name;
this.operatorList = IR[2];
this.matrix = IR[3] || [1, 0, 0, 1, 0, 0];
var bbox = IR[4];
var xstep = IR[5];
var ystep = IR[6];
var paintType = IR[7];
var tilingType = IR[8];
this.bbox = IR[4];
this.xstep = IR[5];
this.ystep = IR[6];
this.paintType = IR[7];
this.tilingType = IR[8];
this.color = color;
this.objs = objs;
this.commonObjs = commonObjs;
this.curMatrix = ctx.mozCurrentTransform;
this.type = 'Pattern';
this.ctx = ctx;
}
TilingPattern.getIR = function TilingPattern_getIR(operatorList, dict, args) {
var matrix = dict.get('Matrix');
var bbox = dict.get('BBox');
var xstep = dict.get('XStep');
var ystep = dict.get('YStep');
var paintType = dict.get('PaintType');
var tilingType = dict.get('TilingType');
return [
'TilingPattern', args, operatorList, matrix, bbox, xstep, ystep,
paintType, tilingType
];
};
TilingPattern.prototype = {
createPatternCanvas: function TilinPattern_createPatternCanvas(tmpCanvas) {
var operatorList = this.operatorList;
var bbox = this.bbox;
var xstep = this.xstep;
var ystep = this.ystep;
var paintType = this.paintType;
var tilingType = this.tilingType;
var color = this.color;
var objs = this.objs;
var commonObjs = this.commonObjs;
var ctx = this.ctx;
TODO('TilingType: ' + tilingType);
this.curMatrix = ctx.mozCurrentTransform;
this.ctx = ctx;
this.type = 'Pattern';
var x0 = bbox[0], y0 = bbox[1], x1 = bbox[2], y1 = bbox[3];
var topLeft = [x0, y0];
@ -310,10 +346,14 @@ var TilingPattern = (function TilingPatternClosure() {
height = Math.min(Math.ceil(Math.abs(height * combinedScale[1])),
MAX_PATTERN_SIZE);
var tmpCanvas = createScratchCanvas(width, height);
tmpCanvas.width = width;
tmpCanvas.height = height;
// set the new canvas element context as the graphics context
var tmpCtx = tmpCanvas.getContext('2d');
// for simulated mozCurrentTransform canvas (normaly setting width/height
// will reset the matrix)
tmpCtx.setTransform(1, 0, 0, 1, 0, 0);
var graphics = new CanvasGraphics(tmpCtx, commonObjs, objs);
this.setFillAndStrokeStyleToContext(tmpCtx, paintType, color);
@ -328,25 +368,8 @@ var TilingPattern = (function TilingPatternClosure() {
this.clipBbox(graphics, bbox, x0, y0, x1, y1);
graphics.executeOperatorList(operatorList);
},
this.canvas = tmpCanvas;
}
TilingPattern.getIR = function TilingPattern_getIR(operatorList, dict, args) {
var matrix = dict.get('Matrix');
var bbox = dict.get('BBox');
var xstep = dict.get('XStep');
var ystep = dict.get('YStep');
var paintType = dict.get('PaintType');
var tilingType = dict.get('TilingType');
return [
'TilingPattern', args, operatorList, matrix, bbox, xstep, ystep,
paintType, tilingType
];
};
TilingPattern.prototype = {
setScale: function TilingPattern_setScale(width, height, xstep, ystep) {
this.scale = [width / xstep, height / ystep];
},
@ -392,15 +415,19 @@ var TilingPattern = (function TilingPatternClosure() {
},
getPattern: function TilingPattern_getPattern() {
var matrix = this.matrix;
var curMatrix = this.curMatrix;
var ctx = this.ctx;
// The temporary canvas is created only because the memory is released
// more quickly than creating multiple temporary canvases.
if (temporaryPatternCanvas === null) {
temporaryPatternCanvas = createScratchCanvas(1, 1);
}
this.createPatternCanvas(temporaryPatternCanvas);
ctx.setTransform.apply(ctx, curMatrix);
ctx.transform.apply(ctx, matrix);
var ctx = this.ctx;
ctx.setTransform.apply(ctx, this.curMatrix);
ctx.transform.apply(ctx, this.matrix);
this.scaleToContext();
return ctx.createPattern(this.canvas, 'repeat');
return ctx.createPattern(temporaryPatternCanvas, 'repeat');
}
};