Implements shading types 4-7

This commit is contained in:
Yury Delendik 2014-01-27 07:17:14 -06:00
parent 59526a7cf1
commit a583c319a1
6 changed files with 3587 additions and 9 deletions

View file

@ -15,7 +15,7 @@
* limitations under the License.
*/
/* globals CanvasGraphics, CachedCanvases, ColorSpace, Util, error, info,
isArray */
isArray, makeCssRgb */
'use strict';
@ -49,6 +49,186 @@ ShadingIRs.RadialAxial = {
}
};
var createMeshCanvas = (function createMeshCanvasClosure() {
function drawTriangle(data, context, p1, p2, p3, c1, c2, c3) {
// Very basic Gouraud-shaded triangle rasterization algorithm.
var coords = context.coords, colors = context.colors;
var bytes = data.data, rowSize = data.width * 4;
var tmp;
if (coords[p1 * 2 + 1] > coords[p2 * 2 + 1]) {
tmp = p1; p1 = p2; p2 = tmp; tmp = c1; c1 = c2; c2 = tmp;
}
if (coords[p2 * 2 + 1] > coords[p3 * 2 + 1]) {
tmp = p2; p2 = p3; p3 = tmp; tmp = c2; c2 = c3; c3 = tmp;
}
if (coords[p1 * 2 + 1] > coords[p2 * 2 + 1]) {
tmp = p1; p1 = p2; p2 = tmp; tmp = c1; c1 = c2; c2 = tmp;
}
var x1 = (coords[p1 * 2] + context.offsetX) * context.scaleX;
var y1 = (coords[p1 * 2 + 1] + context.offsetY) * context.scaleY;
var x2 = (coords[p2 * 2] + context.offsetX) * context.scaleX;
var y2 = (coords[p2 * 2 + 1] + context.offsetY) * context.scaleY;
var x3 = (coords[p3 * 2] + context.offsetX) * context.scaleX;
var y3 = (coords[p3 * 2 + 1] + context.offsetY) * context.scaleY;
if (y1 >= y3) {
return;
}
var c1i = c1 * 3, c2i = c2 * 3, c3i = c3 * 3;
var c1r = colors[c1i], c1g = colors[c1i + 1], c1b = colors[c1i + 2];
var c2r = colors[c2i], c2g = colors[c2i + 1], c2b = colors[c2i + 2];
var c3r = colors[c3i], c3g = colors[c3i + 1], c3b = colors[c3i + 2];
var minY = Math.round(y1), maxY = Math.round(y3);
var xa, car, cag, cab;
var xb, cbr, cbg, cbb;
var k;
for (var y = minY; y <= maxY; y++) {
if (y < y2) {
k = y < y1 ? 0 : y1 === y2 ? 1 : (y1 - y) / (y1 - y2);
xa = x1 - (x1 - x2) * k;
car = c1r - (c1r - c2r) * k;
cag = c1g - (c1g - c2g) * k;
cab = c1b - (c1b - c2b) * k;
} else {
k = y > y3 ? 1 : y2 === y3 ? 0 : (y2 - y) / (y2 - y3);
xa = x2 - (x2 - x3) * k;
car = c2r - (c2r - c3r) * k;
cag = c2g - (c2g - c3g) * k;
cab = c2b - (c2b - c3b) * k;
}
k = y < y1 ? 0 : y > y3 ? 1 : (y1 - y) / (y1 - y3);
xb = x1 - (x1 - x3) * k;
cbr = c1r - (c1r - c3r) * k;
cbg = c1g - (c1g - c3g) * k;
cbb = c1b - (c1b - c3b) * k;
var x1_ = Math.round(Math.min(xa, xb));
var x2_ = Math.round(Math.max(xa, xb));
var j = rowSize * y + x1_ * 4;
for (var x = x1_; x <= x2_; x++) {
k = (xa - x) / (xa - xb);
k = k < 0 ? 0 : k > 1 ? 1 : k;
bytes[j++] = (car - (car - cbr) * k) | 0;
bytes[j++] = (cag - (cag - cbg) * k) | 0;
bytes[j++] = (cab - (cab - cbb) * k) | 0;
bytes[j++] = 255;
}
}
}
function drawFigure(data, figure, context) {
var ps = figure.coords;
var cs = figure.colors;
switch (figure.type) {
case 'lattice':
var verticesPerRow = figure.verticesPerRow;
var rows = Math.floor(ps.length / verticesPerRow) - 1;
var cols = verticesPerRow - 1;
for (var i = 0; i < rows; i++) {
var q = i * verticesPerRow;
for (var j = 0; j < cols; j++, q++) {
drawTriangle(data, context,
ps[q], ps[q + 1], ps[q + verticesPerRow],
cs[q], cs[q + 1], cs[q + verticesPerRow]);
drawTriangle(data, context,
ps[q + verticesPerRow + 1], ps[q + 1], ps[q + verticesPerRow],
cs[q + verticesPerRow + 1], cs[q + 1], cs[q + verticesPerRow]);
}
}
break;
case 'triangles':
for (var i = 0, ii = ps.length; i < ii; i += 3) {
drawTriangle(data, context,
ps[i], ps[i + 1], ps[i + 2],
cs[i], cs[i + 1], cs[i + 2]);
}
break;
default:
error('illigal figure');
break;
}
}
function createMeshCanvas(owner, bounds, coords, colors, figures,
backgroundColor) {
// we will increase scale on some weird factor to let antialiasing take
// care of "rough" edges
var EXPECTED_SCALE = 1.5;
// MAX_PATTERN_SIZE is used to avoid OOM situation.
var MAX_PATTERN_SIZE = 3000; // 10in @ 300dpi shall be enough
var boundsWidth = bounds[2] - bounds[0];
var boundsHeight = bounds[3] - bounds[1];
var width = Math.min(Math.ceil(Math.abs(boundsWidth * EXPECTED_SCALE)),
MAX_PATTERN_SIZE);
var height = Math.min(Math.ceil(Math.abs(boundsHeight * EXPECTED_SCALE)),
MAX_PATTERN_SIZE);
var scaleX = width / boundsWidth;
var scaleY = height / boundsHeight;
var tmpCanvas = CachedCanvases.getCanvas('mesh', width, height, false);
var tmpCtx = tmpCanvas.context;
if (backgroundColor) {
tmpCtx.fillStyle = makeCssRgb(backgroundColor);
tmpCtx.fillRect(0, 0, width, height);
}
var context = {
coords: coords,
colors: colors,
offsetX: -bounds[0],
offsetY: -bounds[1],
scaleX: scaleX,
scaleY: scaleY
};
var data = tmpCtx.getImageData(0, 0, width, height);
for (var i = 0; i < figures.length; i++) {
drawFigure(data, figures[i], context);
}
tmpCtx.putImageData(data, 0, 0);
return {canvas: tmpCanvas.canvas, scaleX: 1 / scaleX, scaleY: 1 / scaleY};
}
return createMeshCanvas;
})();
ShadingIRs.Mesh = {
fromIR: function Mesh_fromIR(raw) {
var type = raw[1];
var coords = raw[2];
var colors = raw[3];
var figures = raw[4];
var bounds = raw[5];
var matrix = raw[6];
var bbox = raw[7];
var background = raw[8];
return {
type: 'Pattern',
getPattern: function Mesh_getPattern(ctx, owner, shadingFill) {
// Rasterizing on the main thread since sending/queue large canvases
// might cause OOM.
// TODO consider using WebGL or asm.js to perform rasterization
var temporaryPatternCanvas = createMeshCanvas(owner, bounds,
coords, colors, figures, shadingFill ? null : background);
if (!shadingFill) {
ctx.setTransform.apply(ctx, owner.baseTransform);
if (matrix) {
ctx.transform.apply(ctx, matrix);
}
}
ctx.translate(bounds[0], bounds[1]);
ctx.scale(temporaryPatternCanvas.scaleX,
temporaryPatternCanvas.scaleY);
return ctx.createPattern(temporaryPatternCanvas.canvas, 'no-repeat');
}
};
}
};
ShadingIRs.Dummy = {
fromIR: function Dummy_fromIR() {
return {
@ -61,7 +241,11 @@ ShadingIRs.Dummy = {
};
function getShadingPatternFromIR(raw) {
return ShadingIRs[raw[0]].fromIR(raw);
var shadingIR = ShadingIRs[raw[0]];
if (!shadingIR) {
error('Unknown IR type: ' + raw[0]);
}
return shadingIR.fromIR(raw);
}
var TilingPattern = (function TilingPatternClosure() {