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

Merge pull request #7715 from timvandermeij/svg-groups 

SVG: optimize and refactor group creation code
Yury Delendik 9 years ago committed by GitHub
parent
960e344a8a 426fc454de
commit
273d2de6ec
3 changed files with 87 additions and 119 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. 17
      examples/svgviewer/index.html
  2. 27
      examples/svgviewer/viewer.js
  3. 162
      src/display/svg.js

17
examples/svgviewer/index.html
Unescape View File

@ -2,21 +2,24 @@
<html> <html>
<head> <head>
<meta charset="utf-8">
<title>PDF.js SVG viewer example</title>
<script src="../../node_modules/requirejs/require.js"></script> <script src="../../node_modules/requirejs/require.js"></script>
<script src="viewer.js"></script> <script src="viewer.js"></script>
<style> <style>
body { body {
background-color: gray; background-color: #404040;
} }
.pageContainer { .pageContainer {
border : 1px solid black; border: 1px solid #000;
margin : 5px auto; margin: 5px auto;
background-color : white; background-color: #FFF;
} }
</style> </style>
<title>SVG Viewer Example</title>
</head> </head>
<body> <body>

27
examples/svgviewer/viewer.js
Unescape View File

@ -1,40 +1,29 @@
'use strict'; 'use strict';
var DEFAULT_SCALE = 1.5;
// Parse query string to extract some parameters (it can fail for some input) // Parse query string to extract some parameters (it can fail for some input)
var query = document.location.href.replace(/^[^?]*(\?([^#]*))?(#.*)?/, '$2'); var query = document.location.href.replace(/^[^?]*(\?([^#]*))?(#.*)?/, '$2');
var queryParams = query ? JSON.parse('{' + query.split('&').map(function (a) { var queryParams = query ? JSON.parse('{' + query.split('&').map(function (a) {
return a.split('=').map(decodeURIComponent).map(JSON.stringify).join(': '); return a.split('=').map(decodeURIComponent).map(JSON.stringify).join(': ');
}).join(',') + '}') : {}; }).join(',') + '}') : {};
var url = queryParams.file || '../../test/pdfs/liveprogramming.pdf'; var url = queryParams.file || '../../web/compressed.tracemonkey-pldi-09.pdf';
var scale = +queryParams.scale || 1.5;
function renderDocument(pdf, svgLib) { function renderDocument(pdf, svgLib) {
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(); var promise = Promise.resolve();
for (var i = 1; i <= ii; i++) { for (var i = 1; i <= pdf.numPages; i++) {
var anchor = document.createElement('a');
anchor.setAttribute('name', 'page=' + i);
anchor.setAttribute('title', 'Page ' + i);
document.body.appendChild(anchor);
// Using promise to fetch and render the next page // Using promise to fetch and render the next page
promise = promise.then(function (pageNum, anchor) { promise = promise.then(function (pageNum) {
return pdf.getPage(pageNum).then(function (page) { return pdf.getPage(pageNum).then(function (page) {
var viewport = page.getViewport(scale); var viewport = page.getViewport(DEFAULT_SCALE);
var container = document.createElement('div'); var container = document.createElement('div');
container.id = 'pageContainer' + pageNum; container.id = 'pageContainer' + pageNum;
container.className = 'pageContainer'; container.className = 'pageContainer';
container.style.width = viewport.width + 'px'; container.style.width = viewport.width + 'px';
container.style.height = viewport.height + 'px'; container.style.height = viewport.height + 'px';
anchor.appendChild(container); document.body.appendChild(container);
return page.getOperatorList().then(function (opList) { return page.getOperatorList().then(function (opList) {
var svgGfx = new svgLib.SVGGraphics(page.commonObjs, page.objs); var svgGfx = new svgLib.SVGGraphics(page.commonObjs, page.objs);
@ -43,7 +32,7 @@ function renderDocument(pdf, svgLib) {
}); });
}); });
}); });
}.bind(null, i, anchor)); }.bind(null, i));
} }
} }

162
src/display/svg.js
Unescape View File

@ -294,16 +294,6 @@ var SVGExtraState = (function SVGExtraStateClosure() {
})(); })();
var SVGGraphics = (function SVGGraphicsClosure() { var SVGGraphics = (function SVGGraphicsClosure() {
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 0 ' + width + ' ' + height);
return svg;
}
function opListToTree(opList) { function opListToTree(opList) {
var opTree = []; var opTree = [];
var tmp = []; var tmp = [];
@ -410,9 +400,7 @@ var SVGGraphics = (function SVGGraphicsClosure() {
this.transformMatrix = this.transformStack.pop(); this.transformMatrix = this.transformStack.pop();
this.current = this.extraStack.pop(); this.current = this.extraStack.pop();
this.tgrp = document.createElementNS(NS, 'svg:g'); this.tgrp = null;
this.tgrp.setAttributeNS(null, 'transform', pm(this.transformMatrix));
this.pgrp.appendChild(this.tgrp);
}, },
group: function SVGGraphics_group(items) { group: function SVGGraphics_group(items) {
@ -454,28 +442,18 @@ var SVGGraphics = (function SVGGraphicsClosure() {
var transformMatrix = [a, b, c, d, e, f]; var transformMatrix = [a, b, c, d, e, f];
this.transformMatrix = Util.transform(this.transformMatrix, this.transformMatrix = Util.transform(this.transformMatrix,
transformMatrix); transformMatrix);
this.tgrp = null;
this.tgrp = document.createElementNS(NS, 'svg:g');
this.tgrp.setAttributeNS(null, 'transform', pm(this.transformMatrix));
}, },
getSVG: function SVGGraphics_getSVG(operatorList, viewport) { getSVG: function SVGGraphics_getSVG(operatorList, viewport) {
this.svg = createScratchSVG(viewport.width, viewport.height);
this.viewport = viewport; this.viewport = viewport;
var svgElement = this._initialize(viewport);
return this.loadDependencies(operatorList).then(function () { return this.loadDependencies(operatorList).then(function () {
this.transformMatrix = IDENTITY_MATRIX; this.transformMatrix = IDENTITY_MATRIX;
this.pgrp = document.createElementNS(NS, 'svg:g'); // Parent group
this.pgrp.setAttributeNS(null, 'transform', pm(viewport.transform));
this.tgrp = document.createElementNS(NS, 'svg:g'); // Transform group
this.tgrp.setAttributeNS(null, 'transform', pm(this.transformMatrix));
this.defs = document.createElementNS(NS, 'svg:defs');
this.pgrp.appendChild(this.defs);
this.pgrp.appendChild(this.tgrp);
this.svg.appendChild(this.pgrp);
var opTree = this.convertOpList(operatorList); var opTree = this.convertOpList(operatorList);
this.executeOpTree(opTree); this.executeOpTree(opTree);
return this.svg; return svgElement;
}.bind(this)); }.bind(this));
}, },
@ -634,7 +612,7 @@ var SVGGraphics = (function SVGGraphicsClosure() {
this.group(opTree[x].items); this.group(opTree[x].items);
break; break;
default: default:
warn('Unimplemented method '+ fn); warn('Unimplemented operator ' + fn);
break; break;
} }
} }
@ -760,8 +738,7 @@ var SVGGraphics = (function SVGGraphicsClosure() {
current.txtElement.appendChild(current.tspan); current.txtElement.appendChild(current.tspan);
current.txtgrp.appendChild(current.txtElement); current.txtgrp.appendChild(current.txtElement);
this.tgrp.appendChild(current.txtElement); this._ensureTransformGroup().appendChild(current.txtElement);
}, },
setLeadingMoveText: function SVGGraphics_setLeadingMoveText(x, y) { setLeadingMoveText: function SVGGraphics_setLeadingMoveText(x, y) {
@ -818,16 +795,7 @@ var SVGGraphics = (function SVGGraphicsClosure() {
current.xcoords = []; current.xcoords = [];
}, },
endText: function SVGGraphics_endText() { endText: function SVGGraphics_endText() {},
if (this.current.pendingClip) {
this.cgrp.appendChild(this.tgrp);
this.pgrp.appendChild(this.cgrp);
} else {
this.pgrp.appendChild(this.tgrp);
}
this.tgrp = document.createElementNS(NS, 'svg:g');
this.tgrp.setAttributeNS(null, 'transform', pm(this.transformMatrix));
},
// Path properties // Path properties
setLineWidth: function SVGGraphics_setLineWidth(width) { setLineWidth: function SVGGraphics_setLineWidth(width) {
@ -925,30 +893,15 @@ var SVGGraphics = (function SVGGraphicsClosure() {
pf(current.dashPhase) + 'px'); pf(current.dashPhase) + 'px');
current.path.setAttributeNS(null, 'fill', 'none'); current.path.setAttributeNS(null, 'fill', 'none');
this.tgrp.appendChild(current.path); this._ensureTransformGroup().appendChild(current.path);
if (current.pendingClip) {
this.cgrp.appendChild(this.tgrp);
this.pgrp.appendChild(this.cgrp);
} else {
this.pgrp.appendChild(this.tgrp);
}
// Saving a reference in current.element so that it can be addressed // Saving a reference in current.element so that it can be addressed
// in 'fill' and 'stroke' // in 'fill' and 'stroke'
current.element = current.path; current.element = current.path;
current.setCurrentPoint(x, y); current.setCurrentPoint(x, y);
}, },
endPath: function SVGGraphics_endPath() { endPath: function SVGGraphics_endPath() {},
var current = this.current;
if (current.pendingClip) {
this.cgrp.appendChild(this.tgrp);
this.pgrp.appendChild(this.cgrp);
} else {
this.pgrp.appendChild(this.tgrp);
}
this.tgrp = document.createElementNS(NS, 'svg:g');
this.tgrp.setAttributeNS(null, 'transform', pm(this.transformMatrix));
},
clip: function SVGGraphics_clip(type) { clip: function SVGGraphics_clip(type) {
var current = this.current; var current = this.current;
@ -967,12 +920,12 @@ var SVGGraphics = (function SVGGraphicsClosure() {
this.clippath.appendChild(clipElement); this.clippath.appendChild(clipElement);
this.defs.appendChild(this.clippath); this.defs.appendChild(this.clippath);
// Create a new group with that attribute // Create a clipping group that references the clipping path.
current.pendingClip = true; current.pendingClip = true;
this.cgrp = document.createElementNS(NS, 'svg:g'); this.cgrp = document.createElementNS(NS, 'svg:g');
this.cgrp.setAttributeNS(null, 'clip-path', this.cgrp.setAttributeNS(null, 'clip-path',
'url(#' + current.clipId + ')'); 'url(#' + current.clipId + ')');
this.pgrp.appendChild(this.cgrp); this.svg.appendChild(this.cgrp);
}, },
closePath: function SVGGraphics_closePath() { closePath: function SVGGraphics_closePath() {
@ -1016,20 +969,11 @@ var SVGGraphics = (function SVGGraphicsClosure() {
case 'D': case 'D':
this.setDash(value[0], value[1]); this.setDash(value[0], value[1]);
break; break;
case 'RI':
break;
case 'FL':
break;
case 'Font': case 'Font':
this.setFont(value); this.setFont(value);
break; break;
case 'CA': default:
break; warn('Unimplemented graphic state ' + key);
case 'ca':
break;
case 'BM':
break;
case 'SMask':
break; break;
} }
} }
@ -1083,11 +1027,11 @@ var SVGGraphics = (function SVGGraphicsClosure() {
rect.setAttributeNS(null, 'width', '1px'); rect.setAttributeNS(null, 'width', '1px');
rect.setAttributeNS(null, 'height', '1px'); rect.setAttributeNS(null, 'height', '1px');
rect.setAttributeNS(null, 'fill', current.fillColor); rect.setAttributeNS(null, 'fill', current.fillColor);
this.tgrp.appendChild(rect);
this._ensureTransformGroup().appendChild(rect);
}, },
paintJpegXObject: function SVGGraphics_paintJpegXObject(objId, w, h) { paintJpegXObject: function SVGGraphics_paintJpegXObject(objId, w, h) {
var current = this.current;
var imgObj = this.objs.get(objId); var imgObj = this.objs.get(objId);
var imgEl = document.createElementNS(NS, 'svg:image'); var imgEl = document.createElementNS(NS, 'svg:image');
imgEl.setAttributeNS(XLINK_NS, 'xlink:href', imgObj.src); imgEl.setAttributeNS(XLINK_NS, 'xlink:href', imgObj.src);
@ -1098,13 +1042,7 @@ var SVGGraphics = (function SVGGraphicsClosure() {
imgEl.setAttributeNS(null, 'transform', imgEl.setAttributeNS(null, 'transform',
'scale(' + pf(1 / w) + ' ' + pf(-1 / h) + ')'); 'scale(' + pf(1 / w) + ' ' + pf(-1 / h) + ')');
this.tgrp.appendChild(imgEl); this._ensureTransformGroup().appendChild(imgEl);
if (current.pendingClip) {
this.cgrp.appendChild(this.tgrp);
this.pgrp.appendChild(this.cgrp);
} else {
this.pgrp.appendChild(this.tgrp);
}
}, },
paintImageXObject: function SVGGraphics_paintImageXObject(objId) { paintImageXObject: function SVGGraphics_paintImageXObject(objId) {
@ -1118,7 +1056,6 @@ var SVGGraphics = (function SVGGraphicsClosure() {
paintInlineImageXObject: paintInlineImageXObject:
function SVGGraphics_paintInlineImageXObject(imgData, mask) { function SVGGraphics_paintInlineImageXObject(imgData, mask) {
var current = this.current;
var width = imgData.width; var width = imgData.width;
var height = imgData.height; var height = imgData.height;
@ -1128,7 +1065,7 @@ var SVGGraphics = (function SVGGraphicsClosure() {
cliprect.setAttributeNS(null, 'y', '0'); cliprect.setAttributeNS(null, 'y', '0');
cliprect.setAttributeNS(null, 'width', pf(width)); cliprect.setAttributeNS(null, 'width', pf(width));
cliprect.setAttributeNS(null, 'height', pf(height)); cliprect.setAttributeNS(null, 'height', pf(height));
current.element = cliprect; this.current.element = cliprect;
this.clip('nonzero'); this.clip('nonzero');
var imgEl = document.createElementNS(NS, 'svg:image'); var imgEl = document.createElementNS(NS, 'svg:image');
imgEl.setAttributeNS(XLINK_NS, 'xlink:href', imgSrc); imgEl.setAttributeNS(XLINK_NS, 'xlink:href', imgSrc);
@ -1142,13 +1079,7 @@ var SVGGraphics = (function SVGGraphicsClosure() {
if (mask) { if (mask) {
mask.appendChild(imgEl); mask.appendChild(imgEl);
} else { } else {
this.tgrp.appendChild(imgEl); this._ensureTransformGroup().appendChild(imgEl);
}
if (current.pendingClip) {
this.cgrp.appendChild(this.tgrp);
this.pgrp.appendChild(this.cgrp);
} else {
this.pgrp.appendChild(this.tgrp);
} }
}, },
@ -1171,15 +1102,14 @@ var SVGGraphics = (function SVGGraphicsClosure() {
rect.setAttributeNS(null, 'fill', fillColor); rect.setAttributeNS(null, 'fill', fillColor);
rect.setAttributeNS(null, 'mask', 'url(#' + current.maskId +')'); rect.setAttributeNS(null, 'mask', 'url(#' + current.maskId +')');
this.defs.appendChild(mask); this.defs.appendChild(mask);
this.tgrp.appendChild(rect);
this._ensureTransformGroup().appendChild(rect);
this.paintInlineImageXObject(imgData, mask); this.paintInlineImageXObject(imgData, mask);
}, },
paintFormXObjectBegin: paintFormXObjectBegin:
function SVGGraphics_paintFormXObjectBegin(matrix, bbox) { function SVGGraphics_paintFormXObjectBegin(matrix, bbox) {
this.save();
if (isArray(matrix) && matrix.length === 6) { if (isArray(matrix) && matrix.length === 6) {
this.transform(matrix[0], matrix[1], matrix[2], this.transform(matrix[0], matrix[1], matrix[2],
matrix[3], matrix[4], matrix[5]); matrix[3], matrix[4], matrix[5]);
@ -1201,8 +1131,54 @@ var SVGGraphics = (function SVGGraphicsClosure() {
}, },
paintFormXObjectEnd: paintFormXObjectEnd:
function SVGGraphics_paintFormXObjectEnd() { function SVGGraphics_paintFormXObjectEnd() {},
this.restore();
/**
* @private
*/
_initialize: function SVGGraphics_initialize(viewport) {
// Create the SVG element.
var svg = document.createElementNS(NS, 'svg:svg');
svg.setAttributeNS(null, 'version', '1.1');
svg.setAttributeNS(null, 'width', viewport.width + 'px');
svg.setAttributeNS(null, 'height', viewport.height + 'px');
svg.setAttributeNS(null, 'viewBox', '0 0 ' + viewport.width +
' ' + viewport.height);
// Create the definitions element.
var definitions = document.createElementNS(NS, 'svg:defs');
svg.appendChild(definitions);
this.defs = definitions;
// Create the root group element, which acts a container for all other
// groups and applies the viewport transform.
var rootGroup = document.createElementNS(NS, 'svg:g');
rootGroup.setAttributeNS(null, 'transform', pm(viewport.transform));
svg.appendChild(rootGroup);
// For the construction of the SVG image we are only interested in the
// root group, so we expose it as the entry point of the SVG image for
// the other code in this class.
this.svg = rootGroup;
return svg;
},
/**
* @private
*/
_ensureTransformGroup: function SVGGraphics_ensureTransformGroup() {
if (!this.tgrp) {
this.tgrp = document.createElementNS(NS, 'svg:g');
this.tgrp.setAttributeNS(null, 'transform', pm(this.transformMatrix));
if (this.current.pendingClip) {
this.cgrp.appendChild(this.tgrp);
} else {
this.svg.appendChild(this.tgrp);
}
}
return this.tgrp;
} }
}; };
return SVGGraphics; return SVGGraphics;

Write Preview
Loading…
Cancel
Save