diff --git a/examples/acroforms/forms.js b/examples/acroforms/forms.js
index 6ec92766d..868825fc7 100644
--- a/examples/acroforms/forms.js
+++ b/examples/acroforms/forms.js
@@ -9,7 +9,7 @@
var formFields = {};
-function setupForm(div, content, scale) {
+function setupForm(div, content, viewport) {
function bindInputItem(input, item) {
if (input.name in formFields) {
var value = formFields[input.name];
@@ -27,16 +27,20 @@ function setupForm(div, content, scale) {
}
function createElementWithStyle(tagName, item) {
var element = document.createElement(tagName);
- element.style.left = (item.x * scale) + 'px';
- element.style.top = (item.y * scale) + 'px';
- element.style.width = Math.ceil(item.width * scale) + 'px';
- element.style.height = Math.ceil(item.height * scale) + 'px';
+ var rect = Util.normalizeRect(
+ viewport.convertToViewportRectangle(item.rect));
+ element.style.left = Math.floor(rect[0]) + 'px';
+ element.style.top = Math.floor(rect[1]) + 'px';
+ element.style.width = Math.ceil(rect[2] - rect[0]) + 'px';
+ element.style.height = Math.ceil(rect[3] - rect[1]) + 'px';
return element;
}
function assignFontStyle(element, item) {
var fontStyles = '';
- if ('fontSize' in item)
- fontStyles += 'font-size: ' + Math.round(item.fontSize * scale) + 'px;';
+ if ('fontSize' in item) {
+ fontStyles += 'font-size: ' + Math.round(item.fontSize *
+ viewport.fontScale) + 'px;';
+ }
switch (item.textAlignment) {
case 0:
fontStyles += 'text-align: left;';
@@ -51,83 +55,88 @@ function setupForm(div, content, scale) {
element.setAttribute('style', element.getAttribute('style') + fontStyles);
}
- var items = content.getAnnotations();
- for (var i = 0; i < items.length; i++) {
- var item = items[i];
- switch (item.type) {
- case 'Widget':
- if (item.fieldType != 'Tx' && item.fieldType != 'Btn' &&
- item.fieldType != 'Ch')
- break;
- var inputDiv = createElementWithStyle('div', item);
- inputDiv.className = 'inputHint';
- div.appendChild(inputDiv);
- var input;
- if (item.fieldType == 'Tx') {
- input = createElementWithStyle('input', item);
- }
- if (item.fieldType == 'Btn') {
- input = createElementWithStyle('input', item);
- if (item.flags & 32768) {
- input.type = 'radio';
- // radio button is not supported
- } else if (item.flags & 65536) {
- input.type = 'button';
- // pushbutton is not supported
- } else {
- input.type = 'checkbox';
+ content.getAnnotations().then(function(items) {
+ for (var i = 0; i < items.length; i++) {
+ var item = items[i];
+ switch (item.type) {
+ case 'Widget':
+ if (item.fieldType != 'Tx' && item.fieldType != 'Btn' &&
+ item.fieldType != 'Ch')
+ break;
+ var inputDiv = createElementWithStyle('div', item);
+ inputDiv.className = 'inputHint';
+ div.appendChild(inputDiv);
+ var input;
+ if (item.fieldType == 'Tx') {
+ input = createElementWithStyle('input', item);
}
- }
- if (item.fieldType == 'Ch') {
- input = createElementWithStyle('select', item);
- // select box is not supported
- }
- input.className = 'inputControl';
- input.name = item.fullName;
- input.title = item.alternativeText;
- assignFontStyle(input, item);
- bindInputItem(input, item);
- div.appendChild(input);
- break;
+ if (item.fieldType == 'Btn') {
+ input = createElementWithStyle('input', item);
+ if (item.flags & 32768) {
+ input.type = 'radio';
+ // radio button is not supported
+ } else if (item.flags & 65536) {
+ input.type = 'button';
+ // pushbutton is not supported
+ } else {
+ input.type = 'checkbox';
+ }
+ }
+ if (item.fieldType == 'Ch') {
+ input = createElementWithStyle('select', item);
+ // select box is not supported
+ }
+ input.className = 'inputControl';
+ input.name = item.fullName;
+ input.title = item.alternativeText;
+ assignFontStyle(input, item);
+ bindInputItem(input, item);
+ div.appendChild(input);
+ break;
+ }
}
- }
+ });
}
function renderPage(div, pdf, pageNumber, callback) {
- var page = pdf.getPage(pageNumber);
- var scale = 1.5;
+ pdf.getPage(pageNumber).then(function(page) {
+ var scale = 1.5;
+ var viewport = page.getViewport(scale);
- var pageDisplayWidth = page.width * scale;
- var pageDisplayHeight = page.height * scale;
+ var pageDisplayWidth = viewport.width;
+ var pageDisplayHeight = viewport.height;
- var pageDivHolder = document.createElement('div');
- pageDivHolder.className = 'pdfpage';
- pageDivHolder.style.width = pageDisplayWidth + 'px';
- pageDivHolder.style.height = pageDisplayHeight + 'px';
- div.appendChild(pageDivHolder);
+ var pageDivHolder = document.createElement('div');
+ pageDivHolder.className = 'pdfpage';
+ pageDivHolder.style.width = pageDisplayWidth + 'px';
+ pageDivHolder.style.height = pageDisplayHeight + 'px';
+ div.appendChild(pageDivHolder);
- // Prepare canvas using PDF page dimensions
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
- canvas.width = pageDisplayWidth;
- canvas.height = pageDisplayHeight;
- pageDivHolder.appendChild(canvas);
+ // Prepare canvas using PDF page dimensions
+ var canvas = document.createElement('canvas');
+ var context = canvas.getContext('2d');
+ canvas.width = pageDisplayWidth;
+ canvas.height = pageDisplayHeight;
+ pageDivHolder.appendChild(canvas);
- // Render PDF page into canvas context
- page.startRendering(context, callback);
+ // Render PDF page into canvas context
+ var renderContext = {
+ canvasContext: context,
+ viewport: viewport
+ };
+ page.render(renderContext).then(callback);
- // Prepare and populate form elements layer
- var formDiv = document.createElement('div');
- pageDivHolder.appendChild(formDiv);
+ // Prepare and populate form elements layer
+ var formDiv = document.createElement('div');
+ pageDivHolder.appendChild(formDiv);
- setupForm(formDiv, page, scale);
+ setupForm(formDiv, page, viewport);
+ });
}
-PDFJS.getPdf(pdfWithFormsPath, function getPdfForm(data) {
- // Instantiate PDFDoc with PDF data
- var pdf = new PDFJS.PDFDoc(data);
-
+// Fetch the PDF document from the URL using promices
+PDFJS.getDocument(pdfWithFormsPath).then(function getPdfForm(pdf) {
// Rendering all pages starting from first
var viewer = document.getElementById('viewer');
var pageNumber = 1;
diff --git a/examples/acroforms/index.html b/examples/acroforms/index.html
index 8a9053f78..858ad649f 100644
--- a/examples/acroforms/index.html
+++ b/examples/acroforms/index.html
@@ -6,6 +6,7 @@
+
diff --git a/examples/helloworld/hello.js b/examples/helloworld/hello.js
index 45e61eb6f..7bf18d65b 100644
--- a/examples/helloworld/hello.js
+++ b/examples/helloworld/hello.js
@@ -7,25 +7,31 @@
'use strict';
-PDFJS.getPdf('helloworld.pdf', function getPdfHelloWorld(data) {
- //
- // Instantiate PDFDoc with PDF data
- //
- var pdf = new PDFJS.PDFDoc(data);
- var page = pdf.getPage(1);
- var scale = 1.5;
+//
+// Fetch the PDF document from the URL using promices
+//
+PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
+ // Using promise to fetch the page
+ pdf.getPage(1).then(function(page) {
+ var scale = 1.5;
+ var viewport = page.getViewport(scale);
- //
- // Prepare canvas using PDF page dimensions
- //
- var canvas = document.getElementById('the-canvas');
- var context = canvas.getContext('2d');
- canvas.height = page.height * scale;
- canvas.width = page.width * scale;
+ //
+ // Prepare canvas using PDF page dimensions
+ //
+ var canvas = document.getElementById('the-canvas');
+ var context = canvas.getContext('2d');
+ canvas.height = viewport.height;
+ canvas.width = viewport.width;
- //
- // Render PDF page into canvas context
- //
- page.startRendering(context);
+ //
+ // Render PDF page into canvas context
+ //
+ var renderContext = {
+ canvasContext: context,
+ viewport: viewport
+ };
+ page.render(renderContext);
+ });
});
diff --git a/examples/helloworld/index.html b/examples/helloworld/index.html
index c6af616e6..c9df98809 100644
--- a/examples/helloworld/index.html
+++ b/examples/helloworld/index.html
@@ -6,6 +6,7 @@
+
diff --git a/src/util.js b/src/util.js
index 390b08427..6ec4bc9cb 100644
--- a/src/util.js
+++ b/src/util.js
@@ -242,6 +242,7 @@ var PageViewport = PDFJS.PageViewport = (function PageViewportClosure() {
this.offsetY = offsetY;
this.width = width;
this.height = height;
+ this.fontScale = scale;
}
PageViewport.prototype = {
convertToViewportPoint: function PageViewport_convertToViewportPoint(x, y) {
diff --git a/test/driver.js b/test/driver.js
index 600f53c9c..993a31349 100644
--- a/test/driver.js
+++ b/test/driver.js
@@ -176,11 +176,9 @@ function nextPage(task, loadError) {
var ctx = canvas.getContext('2d');
task.pdfDoc.getPage(task.pageNum).then(function(page) {
var pdfToCssUnitsCoef = 96.0 / 72.0;
- // using mediaBox for the canvas size
- var pageWidth = page.width;
- var pageHeight = page.height;
- canvas.width = pageWidth * pdfToCssUnitsCoef;
- canvas.height = pageHeight * pdfToCssUnitsCoef;
+ var viewport = page.getViewport(pdfToCssUnitsCoef);
+ canvas.width = viewport.width;
+ canvas.height = viewport.height;
clear(ctx);
// using the text layer builder that does nothing to test