211 lines
6.6 KiB
JavaScript
211 lines
6.6 KiB
JavaScript
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
|
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
|
|
/* Copyright 2014 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
/* globals CanvasGraphics, CachedCanvases, ColorSpace, Util, error, info,
|
|
isArray */
|
|
|
|
'use strict';
|
|
|
|
var ShadingIRs = {};
|
|
|
|
ShadingIRs.RadialAxial = {
|
|
fromIR: function RadialAxial_fromIR(raw) {
|
|
var type = raw[1];
|
|
var colorStops = raw[2];
|
|
var p0 = raw[3];
|
|
var p1 = raw[4];
|
|
var r0 = raw[5];
|
|
var r1 = raw[6];
|
|
return {
|
|
type: 'Pattern',
|
|
getPattern: function RadialAxial_getPattern(ctx) {
|
|
var grad;
|
|
if (type === 'axial') {
|
|
grad = ctx.createLinearGradient(p0[0], p0[1], p1[0], p1[1]);
|
|
} else if (type === 'radial') {
|
|
grad = ctx.createRadialGradient(p0[0], p0[1], r0, p1[0], p1[1], r1);
|
|
}
|
|
|
|
for (var i = 0, ii = colorStops.length; i < ii; ++i) {
|
|
var c = colorStops[i];
|
|
grad.addColorStop(c[0], c[1]);
|
|
}
|
|
return grad;
|
|
}
|
|
};
|
|
}
|
|
};
|
|
|
|
ShadingIRs.Dummy = {
|
|
fromIR: function Dummy_fromIR() {
|
|
return {
|
|
type: 'Pattern',
|
|
getPattern: function Dummy_fromIR_getPattern() {
|
|
return 'hotpink';
|
|
}
|
|
};
|
|
}
|
|
};
|
|
|
|
function getShadingPatternFromIR(raw) {
|
|
return ShadingIRs[raw[0]].fromIR(raw);
|
|
}
|
|
|
|
var TilingPattern = (function TilingPatternClosure() {
|
|
var PaintType = {
|
|
COLORED: 1,
|
|
UNCOLORED: 2
|
|
};
|
|
|
|
var MAX_PATTERN_SIZE = 3000; // 10in @ 300dpi shall be enough
|
|
|
|
function TilingPattern(IR, color, ctx, objs, commonObjs, baseTransform) {
|
|
this.name = IR[1][0].name;
|
|
this.operatorList = IR[2];
|
|
this.matrix = IR[3] || [1, 0, 0, 1, 0, 0];
|
|
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.baseTransform = baseTransform;
|
|
this.type = 'Pattern';
|
|
this.ctx = ctx;
|
|
}
|
|
|
|
TilingPattern.prototype = {
|
|
createPatternCanvas: function TilinPattern_createPatternCanvas(owner) {
|
|
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;
|
|
|
|
info('TilingType: ' + tilingType);
|
|
|
|
var x0 = bbox[0], y0 = bbox[1], x1 = bbox[2], y1 = bbox[3];
|
|
|
|
var topLeft = [x0, y0];
|
|
// we want the canvas to be as large as the step size
|
|
var botRight = [x0 + xstep, y0 + ystep];
|
|
|
|
var width = botRight[0] - topLeft[0];
|
|
var height = botRight[1] - topLeft[1];
|
|
|
|
// Obtain scale from matrix and current transformation matrix.
|
|
var matrixScale = Util.singularValueDecompose2dScale(this.matrix);
|
|
var curMatrixScale = Util.singularValueDecompose2dScale(
|
|
this.baseTransform);
|
|
var combinedScale = [matrixScale[0] * curMatrixScale[0],
|
|
matrixScale[1] * curMatrixScale[1]];
|
|
|
|
// MAX_PATTERN_SIZE is used to avoid OOM situation.
|
|
// Use width and height values that are as close as possible to the end
|
|
// result when the pattern is used. Too low value makes the pattern look
|
|
// blurry. Too large value makes it look too crispy.
|
|
width = Math.min(Math.ceil(Math.abs(width * combinedScale[0])),
|
|
MAX_PATTERN_SIZE);
|
|
|
|
height = Math.min(Math.ceil(Math.abs(height * combinedScale[1])),
|
|
MAX_PATTERN_SIZE);
|
|
|
|
var tmpCanvas = CachedCanvases.getCanvas('pattern', width, height, true);
|
|
var tmpCtx = tmpCanvas.context;
|
|
var graphics = new CanvasGraphics(tmpCtx, commonObjs, objs);
|
|
graphics.groupLevel = owner.groupLevel;
|
|
|
|
this.setFillAndStrokeStyleToContext(tmpCtx, paintType, color);
|
|
|
|
this.setScale(width, height, xstep, ystep);
|
|
this.transformToScale(graphics);
|
|
|
|
// transform coordinates to pattern space
|
|
var tmpTranslate = [1, 0, 0, 1, -topLeft[0], -topLeft[1]];
|
|
graphics.transform.apply(graphics, tmpTranslate);
|
|
|
|
this.clipBbox(graphics, bbox, x0, y0, x1, y1);
|
|
|
|
graphics.executeOperatorList(operatorList);
|
|
return tmpCanvas.canvas;
|
|
},
|
|
|
|
setScale: function TilingPattern_setScale(width, height, xstep, ystep) {
|
|
this.scale = [width / xstep, height / ystep];
|
|
},
|
|
|
|
transformToScale: function TilingPattern_transformToScale(graphics) {
|
|
var scale = this.scale;
|
|
var tmpScale = [scale[0], 0, 0, scale[1], 0, 0];
|
|
graphics.transform.apply(graphics, tmpScale);
|
|
},
|
|
|
|
scaleToContext: function TilingPattern_scaleToContext() {
|
|
var scale = this.scale;
|
|
this.ctx.scale(1 / scale[0], 1 / scale[1]);
|
|
},
|
|
|
|
clipBbox: function clipBbox(graphics, bbox, x0, y0, x1, y1) {
|
|
if (bbox && isArray(bbox) && 4 == bbox.length) {
|
|
var bboxWidth = x1 - x0;
|
|
var bboxHeight = y1 - y0;
|
|
graphics.rectangle(x0, y0, bboxWidth, bboxHeight);
|
|
graphics.clip();
|
|
graphics.endPath();
|
|
}
|
|
},
|
|
|
|
setFillAndStrokeStyleToContext:
|
|
function setFillAndStrokeStyleToContext(context, paintType, color) {
|
|
switch (paintType) {
|
|
case PaintType.COLORED:
|
|
var ctx = this.ctx;
|
|
context.fillStyle = ctx.fillStyle;
|
|
context.strokeStyle = ctx.strokeStyle;
|
|
break;
|
|
case PaintType.UNCOLORED:
|
|
var rgbColor = ColorSpace.singletons.rgb.getRgb(color, 0);
|
|
var cssColor = Util.makeCssRgb(rgbColor);
|
|
context.fillStyle = cssColor;
|
|
context.strokeStyle = cssColor;
|
|
break;
|
|
default:
|
|
error('Unsupported paint type: ' + paintType);
|
|
}
|
|
},
|
|
|
|
getPattern: function TilingPattern_getPattern(ctx, owner) {
|
|
var temporaryPatternCanvas = this.createPatternCanvas(owner);
|
|
|
|
var ctx = this.ctx;
|
|
ctx.setTransform.apply(ctx, this.baseTransform);
|
|
ctx.transform.apply(ctx, this.matrix);
|
|
this.scaleToContext();
|
|
|
|
return ctx.createPattern(temporaryPatternCanvas, 'repeat');
|
|
}
|
|
};
|
|
|
|
return TilingPattern;
|
|
})();
|