SVG Viewer example demo
This commit is contained in:
pramodhkp
parent
c0a6b0f308
commit
dd253aadeb
8
examples/svgviewer/README.md
Normal file
8
examples/svgviewer/README.md
Normal 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
Normal file
39
examples/svgviewer/index.html
Normal 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
Normal file
55
examples/svgviewer/viewer.js
Normal 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
Normal file
695
src/display/svg.js
Normal 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;
|
||||||
|
})();
|
||||||
Loading…
x
Reference in New Issue
Block a user