akira
/
pdfjs-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #4979 from pramodhkp/svg-v3 

SVG Viewer Example demo
Yury Delendik 11 years ago
parent
84157e039d dd253aadeb
commit
6258ae61d5
4 changed files with 797 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      examples/svgviewer/README.md
  2. 39
      examples/svgviewer/index.html
  3. 55
      examples/svgviewer/viewer.js
  4. 695
      src/display/svg.js

8
examples/svgviewer/README.md
Unescape View File

@ -0,0 +1,8 @@
## PDF.js using SVG
This is a project for implementing alternate backend for PDF.js using Scalable Vector Graphics. This is still a WIP.
Take a look at [proposal](https://docs.google.com/document/d/1k4nPx1RrHbxXi94kSdvW5ay8KMkjwLmBEiCNupyzlwk/pub) for this project.
## Getting started
Take a look at src/display/svg.js to see the SVG rendering code.

39
examples/svgviewer/index.html
Unescape View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<!-- In production, only one script (pdf.js) is necessary -->
<!-- In production, change the content of PDFJS.workerSrc below -->
<script src="../../src/shared/util.js"></script>
<script src="../../src/display/api.js"></script>
<script src="../../src/display/metadata.js"></script>
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/font_loader.js"></script>
<script src="../../src/display/svg.js"></script>
<script>
// Specify the main script used to create a new PDF.JS web worker.
// In production, leave this undefined or change it to point to the
// combined `pdf.worker.js` file.
PDFJS.workerSrc = '../../src/worker_loader.js';
</script>
<script src="viewer.js"></script>
<style>
body {
background-color: gray;
}
.pageContainer {
border : 1px solid black;
margin : 5px auto;
background-color : white;
}
</style>
<title>SVG Viewer Example</title>
</head>
<body>
</body>
</html>

55
examples/svgviewer/viewer.js
Unescape View File

@ -0,0 +1,55 @@
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
//
// See README for overview
//
'use strict';
//
// Fetch the PDF document from the URL using promises
//
PDFJS.getDocument('../../test/pdfs/liveprogramming.pdf').then(function(pdf) {
var numPages = pdf.numPages;
// Using promise to fetch the page
// For testing only.
var MAX_NUM_PAGES = 50;
var ii = Math.min(MAX_NUM_PAGES, numPages);
var promise = Promise.resolve();
for (var i = 1; i <= ii; i++) {
// Using promise to fetch the page
promise = promise.then(function (pageNum) {
return pdf.getPage(pageNum).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var container = document.createElement('div');
container.id = 'pageContainer' + pageNum;
container.className = 'pageContainer';
container.style.width = viewport.width + 'px';
container.style.height = viewport.height + 'px';
document.body.appendChild(container);
var renderContext = {
viewport: viewport,
pageNum: pageNum,
container: container
};
// run rendering only when all pages are loaded
promise.then(function () {
page.getOperatorList().then(function (opList) {
var svgGfx = new SVGGraphics(page.commonObjs);
svgGfx.loadDependencies(opList).then(function (values) {
svgGfx.beginDrawing(renderContext.viewport, renderContext.pageNum,
renderContext.container, opList);
});
});
});
});
}.bind(null, i));
}
});

695
src/display/svg.js
Unescape View File

@ -0,0 +1,695 @@
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
/* Copyright 2012 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 PDFJS, FONT_IDENTITY_MATRIX, IDENTITY_MATRIX,
isNum, OPS, Promise, Util, warn */
'use strict';
function createScratchSVG(width, height) {
var NS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(NS, 'svg:svg');
svg.setAttributeNS(null, 'version', '1.1');
svg.setAttributeNS(null, 'width', width + 'px');
svg.setAttributeNS(null, 'height', height + 'px');
svg.setAttributeNS(null, 'viewBox', '0 ' + (-height) + ' ' +
width + ' ' + height);
return svg;
}
var SVGExtraState = (function SVGExtraStateClosure() {
function SVGExtraState(old) {
// Are soft masks and alpha values shapes or opacities?
this.fontSize = 0;
this.fontSizeScale = 1;
this.textMatrix = IDENTITY_MATRIX;
this.fontMatrix = FONT_IDENTITY_MATRIX;
this.leading = 0;
// Current point (in user coordinates)
this.x = 0;
this.y = 0;
// Start of text line (in text coordinates)
this.lineX = 0;
this.lineY = 0;
// Character and word spacing
this.charSpacing = 0;
this.wordSpacing = 0;
this.textHScale = 1;
this.textRise = 0;
// Default fore and background colors
this.fillColor = '#000000';
this.strokeColor = '#000000';
this.fillAlpha = 1;
this.strokeAlpha = 1;
this.lineWidth = 1;
this.lineJoin = '';
this.lineCap = '';
this.miterLimit = 0;
// Dependency
this.dependencies = [];
this.count = 0;
}
SVGExtraState.prototype = {
clone: function SVGExtraState_clone() {
return Object.create(this);
},
setCurrentPoint: function SVGExtraState_setCurrentPoint(x, y) {
this.x = x;
this.y = y;
}
};
return SVGExtraState;
})();
function opListToTree(opList) {
var opTree = [];
var saveIdx = [];
var restIdx = [];
var tmp = [];
var items = [];
var opListLen = opList.length;
for (var x = 0; x < opListLen; x++) {
if (opList[x].fn === 'save') {
opTree.push({'fnId': 92, 'fn': 'group', 'items': []});
tmp.push(opTree);
opTree = opTree[opTree.length - 1].items;
continue;
}
if(opList[x].fn === 'restore') {
opTree = tmp.pop();
} else {
opTree.push(opList[x]);
}
}
return opTree;
}
var SVGGraphics = (function SVGGraphicsClosure(ctx) {
function SVGGraphics(commonObjs) {
this.current = new SVGExtraState();
this.transformMatrix = IDENTITY_MATRIX; // Graphics state matrix
this.transformStack = [];
this.extraStack = [];
this.commonObjs = commonObjs;
this.pendingEOFill = false;
}
var NS = 'http://www.w3.org/2000/svg';
var XML_NS = 'http://www.w3.org/XML/1998/namespace';
var LINE_CAP_STYLES = ['butt', 'round', 'square'];
var LINE_JOIN_STYLES = ['miter', 'round', 'bevel'];
var NORMAL_CLIP = {};
var EO_CLIP = {};
SVGGraphics.prototype = {
save: function SVGGraphics_save() {
this.transformStack.push(this.transformMatrix);
var old = this.current;
this.extraStack.push(old);
this.current = old.clone();
},
restore: function SVGGraphics_restore() {
this.transformMatrix = this.transformStack.pop();
this.current = this.extraStack.pop();
},
group: function SVGGraphics_group(items) {
this.save();
this.executeOpTree(items);
this.restore();
},
loadDependencies: function SVGGraphics_loadDependencies(operatorList) {
var fnArray = operatorList.fnArray;
var fnArrayLen = fnArray.length;
var argsArray = operatorList.argsArray;
var self = this;
for (var i = 0; i < fnArrayLen; i++) {
if (OPS.dependency == fnArray[i]) {
var deps = argsArray[i];
for (var n = 0, nn = deps.length; n < nn; n++) {
var obj = deps[n];
var common = obj.substring(0, 2) === 'g_';
if (common) {
var promise = new Promise(function(resolve) {
self.commonObjs.get(obj, resolve);
});
}
this.current.dependencies.push(promise);
}
}
}
return Promise.all(this.current.dependencies);
},
transform: function SVGGraphics_transform(a, b, c, d, e, f) {
var transformMatrix = [a, b, c, d, e, f];
this.transformMatrix = PDFJS.Util.transform(this.transformMatrix,
transformMatrix);
this.tgrp = document.createElementNS(NS, 'svg:g');
this.tgrp.setAttributeNS(null, 'id', 'transform');
this.tgrp.setAttributeNS(null, 'transform',
'matrix(' + this.transformMatrix + ')');
this.pgrp.appendChild(this.tgrp);
},
beginDrawing: function SVGGraphics_beginDrawing(viewport, pageNum,
container, operatorList) {
this.svg = createScratchSVG(viewport.width, viewport.height);
this.container = container;
this.viewport = viewport;
this.transformMatrix = IDENTITY_MATRIX;
this.pgrp = document.createElementNS(NS, 'svg:g'); // Parent group
this.pgrp.setAttributeNS(null, 'transform', 'scale(' + viewport.scale +
',' + -viewport.scale + ')');
this.tgrp = document.createElementNS(NS, 'svg:g'); // Transform group
this.tgrp.setAttributeNS(null, 'transform',
'matrix(' + this.transformMatrix +')');
this.pgrp.appendChild(this.tgrp);
this.svg.appendChild(this.pgrp);
this.container.appendChild(this.svg);
this.convertOpList(operatorList);
},
convertOpList: function SVGGraphics_convertOpList(operatorList) {
var argsArray = operatorList.argsArray;
var fnArray = operatorList.fnArray;
var fnArrayLen = fnArray.length;
var argsArrayLen = argsArray.length;
var opTree = [];
var REVOPS = [];
for (var op in OPS) {
REVOPS[OPS[op]] = op;
}
var opList = [];
for (var x = 0; x < fnArrayLen; x++) {
var fnId = fnArray[x];
opList.push({'fnId' : fnId, 'fn': REVOPS[fnId], 'args': argsArray[x]});
}
opTree = opListToTree(opList);
this.executeOpTree(opTree);
return opTree;
},
executeOpTree: function SVGGraphics_executeOpTree(opTree) {
var opTreeLen = opTree.length;
for(var x = 0; x < opTreeLen; x++) {
var fn = opTree[x].fn;
var fnId = opTree[x].fnId;
var args = opTree[x].args;
switch (fnId | 0) {
case OPS.beginText:
this.beginText(args);
break;
case OPS.setLeading:
this.setLeading(args);
break;
case OPS.setLeadingMoveText:
this.setLeadingMoveText(args[0], args[1]);
break;
case OPS.setFont:
this.setFont(args);
break;
case OPS.showText:
this.showText(args[0]);
break;
case OPS.showSpacedText:
this.showText(args[0]);
break;
case OPS.endText:
this.endText(args);
break;
case OPS.moveText:
this.moveText(args[0], args[1]);
break;
case OPS.setCharSpacing:
this.setCharSpacing(args[0]);
break;
case OPS.setWordSpacing:
this.setWordSpacing(args[0]);
break;
case OPS.setTextMatrix:
this.setTextMatrix(args[0], args[1], args[2],
args[3], args[4], args[5]);
break;
case OPS.setLineWidth:
this.setLineWidth(args);
break;
case OPS.setLineJoin:
this.setLineJoin(args);
break;
case OPS.setLineCap:
this.setLineCap(args);
break;
case OPS.setMiterLimit:
this.setMiterLimit(args);
break;
case OPS.setFillRGBColor:
this.setFillRGBColor(args[0], args[1], args[2]);
break;
case OPS.setStrokeRGBColor:
this.setStrokeRGBColor(args[0], args[1], args[2]);
break;
case OPS.setDash:
this.setDash(args[0], args[1]);
break;
case OPS.setGState:
this.setGState(args);
break;
case OPS.fill:
this.fill();
break;
case OPS.eoFill:
this.eoFill();
break;
case OPS.stroke:
this.stroke();
break;
case OPS.fillStroke:
this.fillStroke();
break;
case OPS.closePath:
this.closePath();
break;
case OPS.closeStroke:
this.closeStroke();
break;
case OPS.closeFillStroke:
this.closeFillStroke();
break;
case OPS.nextLine:
this.nextLine();
break;
case OPS.transform:
this.transform(args[0], args[1], args[2], args[3],
args[4], args[5]);
break;
case OPS.constructPath:
this.constructPath(args[0], args[1]);
break;
case OPS.rectangle:
this.rectangle(args[0], args[1], args[2], args[3]);
break;
case 92:
this.group(opTree[x].items);
break;
default:
warn('Unimplemented Method '+ fn);
break;
}
}
},
setWordSpacing: function SVGGraphics_setWordSpacing(wordSpacing) {
this.current.wordSpacing = wordSpacing;
},
setCharSpacing: function SVGGraphics_setCharSpacing(charSpacing) {
this.current.charSpacing = charSpacing;
},
nextLine: function SVGGraphics_nextLine() {
this.moveText(0, this.current.leading);
},
setTextMatrix: function SVGGraphics_setTextMatrix(a, b, c, d, e, f) {
var current = this.current;
this.current.textMatrix = [a, b, c, d, e, f];
this.current.lineMatrix = [a, b, c, d, e, f];
this.current.x = this.current.lineX = 0;
this.current.y = this.current.lineY = 0;
current.xcoords = [];
current.tspan = document.createElementNS(NS, 'svg:tspan');
current.tspan.setAttributeNS(null, 'font-family', current.fontFamily);
current.tspan.setAttributeNS(null, 'font-size', current.fontSize);
current.tspan.setAttributeNS(null, 'y', -current.y);
current.txtElement = document.createElementNS(NS, 'svg:text');
current.txtElement.appendChild(current.tspan);
},
beginText: function SVGGraphics_beginText(args) {
this.current.x = this.current.lineX = 0;
this.current.y = this.current.lineY = 0;
this.current.textMatrix = IDENTITY_MATRIX;
this.current.lineMatrix = IDENTITY_MATRIX;
this.current.tspan = document.createElementNS(NS, 'svg:tspan');
this.current.txtElement = document.createElementNS(NS, 'svg:text');
this.current.txtgrp = document.createElementNS(NS, 'svg:g');
this.current.xcoords = [];
},
moveText: function SVGGraphics_moveText(x, y) {
var current = this.current;
this.current.x = this.current.lineX += x;
this.current.y = this.current.lineY += y;
current.xcoords = [];
current.tspan = document.createElementNS(NS, 'svg:tspan');
current.tspan.setAttributeNS(null, 'font-family', current.fontFamily);
current.tspan.setAttributeNS(null, 'font-size', current.fontSize);
current.tspan.setAttributeNS(null, 'y', -current.y);
},
showText: function SVGGraphics_showText(glyphs) {
this.save();
var current = this.current;
var font = current.font;
var fontSize = current.fontSize;
if (fontSize === 0) {
return;
}
var fontSizeScale = current.fontSizeScale;
var charSpacing = current.charSpacing;
var wordSpacing = current.wordSpacing;
var fontDirection = current.fontDirection;
var textHScale = current.textHScale * fontDirection;
var glyphsLength = glyphs.length;
var vertical = font.vertical;
var defaultVMetrics = font.defaultVMetrics;
var widthAdvanceScale = fontSize * current.fontMatrix[0];
var x = 0, i;
for (i = 0; i < glyphsLength; ++i) {
var glyph = glyphs[i];
if (glyph === null) {
// word break
x += fontDirection * wordSpacing;
continue;
} else if (isNum(glyph)) {
x += -glyph * fontSize * 0.001;
continue;
}
current.xcoords.push(current.x + x * textHScale);
var width = glyph.width;
var character = glyph.fontChar;
var charWidth = width * widthAdvanceScale + charSpacing * fontDirection;
x += charWidth;
current.tspan.textContent += character;
}
if (vertical) {
current.y -= x * textHScale;
} else {
current.x += x * textHScale;
}
current.tspan.setAttributeNS(null, 'x', current.xcoords.join(' '));
current.tspan.setAttributeNS(null, 'font-family', current.fontFamily);
current.tspan.setAttributeNS(null, 'font-size', current.fontSize);
current.txtElement.setAttributeNS(null, 'transform',
'matrix(' + current.textMatrix + ') scale(1, -1)' );
current.txtElement.setAttributeNS(XML_NS, 'xml:space', 'preserve');
current.txtElement.appendChild(current.tspan);
current.txtgrp.setAttributeNS(null, 'id', 'text');
current.txtgrp.appendChild(current.txtElement);
this.tgrp.appendChild(current.txtElement);
this.restore();
},
setLeadingMoveText: function SVGGraphics_setLeadingMoveText(x, y) {
this.setLeading(-y);
this.moveText(x, y);
},
setFont: function SVGGraphics_setFont(details) {
var current = this.current;
var fontObj = this.commonObjs.get(details[0]);
var size = details[1];
this.current.font = fontObj;
current.fontMatrix = (fontObj.fontMatrix ?
fontObj.fontMatrix : FONT_IDENTITY_MATRIX);
var bold = fontObj.black ? (fontObj.bold ? 'bolder' : 'bold') :
(fontObj.bold ? 'bold' : 'normal');
var italic = fontObj.italic ? 'italic' : 'normal';
current.font.style = (bold == 'normal' ?
(italic == 'normal' ?
'' : 'font-weight:' + italic) :
'font-weight:' + bold);
if (size < 0) {
size = -size;
current.fontDirection = -1;
} else {
current.fontDirection = 1;
}
current.fontSize = size;
current.fontFamily = fontObj.loadedName;
},
endText: function SVGGraphics_endText(args) {
// Empty for now. Not sure how to break showText into this.
},
// Path properties
setLineWidth: function SVGGraphics_setLineWidth(width) {
this.current.lineWidth = width;
},
setLineCap: function SVGGraphics_setLineCap(style) {
this.current.lineCap = LINE_CAP_STYLES[style];
},
setLineJoin: function SVGGraphics_setLineJoin(style) {
this.current.lineJoin = LINE_JOIN_STYLES[style];
},
setMiterLimit: function SVGGraphics_setMiterLimit(limit) {
this.current.miterLimit = limit;
},
setStrokeRGBColor: function SVGGraphics_setStrokeRGBColor(r, g, b) {
var color = Util.makeCssRgb(arguments);
this.current.strokeColor = color;
},
setFillRGBColor: function SVGGraphics_setFillRGBColor(r, g, b) {
var color = Util.makeCssRgb(arguments);
this.current.fillColor = color;
},
setDash: function SVGGraphics_setDash(dashArray, dashPhase) {
this.current.dashArray = dashArray;
this.current.dashPhase = dashPhase;
},
constructPath: function SVGGraphics_constructPath(ops, args) {
var current = this.current;
var x = current.x, y = current.y;
current.path = document.createElementNS(NS, 'svg:path');
var d = '';
var arr = [];
var opLength = ops.length;
for (var i = 0, j = 0; i < opLength; i++) {
switch (ops[i] | 0) {
case OPS.moveTo:
x = args[j++];
y = args[j++];
d += 'M' + x + ' ' + y;
break;
case OPS.lineTo:
x = args[j++];
y = args[j++];
d += 'L' + x + ' ' + y;
break;
case OPS.curveTo:
x = args[j + 4];
y = args[j + 5];
arr = [args[j], args[j + 1], args[j + 2], args[j + 3], x, y];
d += 'C ' + arr.join(' ');
j += 6;
break;
case OPS.curveTo2:
x = args[j + 2];
y = args[j + 3];
arr = [x, y, args[j], args[j + 1], args[j + 2], args[j + 3]];
d += 'C ' + arr.join(' ');
j += 4;
break;
case OPS.curveTo3:
x = args[j + 2];
y = args[j + 3];
arr = [args[j], args[j + 1], x, y, x, y];
d += 'C ' + arr.join(' ');
j += 4;
break;
case OPS.closePath:
d += 'Z';
break;
}
}
current.path.setAttributeNS(null, 'd', d);
current.path.setAttributeNS(null, 'stroke-miterlimit',
current.miterLimit);
current.path.setAttributeNS(null, 'stroke-linecap', current.lineCap);
current.path.setAttributeNS(null, 'stroke-width', current.lineWidth);
current.path.setAttributeNS(null, 'stroke-dasharray', current.dashArray);
current.path.setAttributeNS(null, 'stroke-dashoffset', current.dashPhase);
this.tgrp.appendChild(current.path);
// Saving a reference in current.element so that it can be addressed
// in 'fill' and 'stroke'
current.element = current.path;
current.setCurrentPoint(x, y);
},
closePath: function SVGGraphics_closePath() {
var current = this.current;
var d = current.path.getAttributeNS(null, 'd');
d += 'Z';
current.path.setAttributeNS(null, 'd', d);
},
setLeading: function SVGGraphics_setLeading(leading) {
this.current.leading = -leading;
},
setTextRise: function SVGGraphics_setTextRise(textRise) {
this.current.textRise = textRise;
},
setHScale: function SVGGraphics_setHScale(scale) {
this.current.textHScale = scale / 100;
},
setGState: function SVGGraphics_setGState(states) {
for (var i = 0, ii = states.length; i < ii; i++) {
var state = states[i];
var key = state[0];
var value = state[1];
switch (key) {
case 'LW':
this.setLineWidth(value);
break;
case 'LC':
this.setLineCap(value);
break;
case 'LJ':
this.setLineJoin(value);
break;
case 'ML':
this.setMiterLimit(value);
break;
case 'D':
this.setDash(value[0], value[1]);
break;
case 'RI':
break;
case 'FL':
break;
case 'Font':
this.setFont(value[0], value[1]);
break;
case 'CA':
break;
case 'ca':
break;
case 'BM':
break;
case 'SMask':
break;
}
}
},
fill: function SVGGraphics_fill() {
this.save();
var current = this.current;
current.element.setAttributeNS(null, 'fill', current.fillColor);
this.tgrp.appendChild(current.element);
this.restore();
},
stroke: function SVGGraphics_stroke() {
this.save();
var current = this.current;
current.element.setAttributeNS(null, 'stroke', current.strokeColor);
current.element.setAttributeNS(null, 'fill', 'none');
this.tgrp.appendChild(current.element);
this.restore();
},
eoFill: function SVGGraphics_eoFill() {
this.save();
var current = this.current;
current.element.setAttributeNS(null, 'fill', current.fillColor);
current.element.setAttributeNS(null, 'fill-rule', 'evenodd');
this.restore();
},
fillStroke: function SVGGraphics_fillStroke() {
this.fill();
this.stroke();
},
closeStroke: function SVGGraphics_closeStroke() {
this.closePath();
this.stroke();
},
closeFillStroke: function SVGGraphics_closeFillStroke() {
this.closePath();
this.fillStroke();
},
rectangle: function SVGGraphics_rectangle(x, y, width, height) {
this.save();
var current = this.current;
if (width < 0) {
x = x + width;
width = -width;
}
if (height < 0) {
y = y + height;
height = -height;
}
current.rect = document.createElementNS(NS, 'svg:rect');
current.rect.setAttributeNS(null, 'x', x);
current.rect.setAttributeNS(null, 'y', y);
current.rect.setAttributeNS(null, 'fill', 'none');
current.rect.setAttributeNS(null, 'width', width);
current.rect.setAttributeNS(null, 'height', height);
current.rect.setAttributeNS(null, 'stroke-width', current.lineWidth);
// Saving a reference in current.element so that it can be addressed
// in 'fill' or 'stroke'
current.element = current.rect;
},
};
return SVGGraphics;
})();
Write Preview
Loading…
Cancel
Save