var version = this.getVersionToLoad(parseInt(pageNr));
page = $("#page_" + pageNr);
$(doublePage).append(page);
+ this.renderPDFTextsCanvas();
+ this.renderTextsCanvas();
$(page).show();
$(page).addClass(position);
var $this = this;
this._preloadContentLinkTextures(page, this.fluidbook.settings.clinks[page], this.fluidbook.settings.links[page], enter, function (textures, clinks) {
if ($this.fluidbook.pagetransitions.flip3d !== false) {
- var d = 1024;
+ var dh = screen.height * window.devicePixelRatio * 1.1;
+ var dw = $this.fluidbook.settings.width * (dh / $this.fluidbook.settings.height);
var c = document.getElementById("pscanvas");
- c.width = d;
- c.height = d;
+ c.width = dw;
+ c.height = dh;
var ctx = c.getContext("2d");
- ctx.clearRect(0, 0, d, d);
+ ctx.clearRect(0, 0, dw, dh);
- var wr = d / $this.fluidbook.settings.width;
- var hr = d / $this.fluidbook.settings.height;
+ var wr = dw / $this.fluidbook.settings.width;
+ var hr = dh / $this.fluidbook.settings.height;
// Draw background
if ($this.backgrounds[page] !== undefined && $this.backgrounds[page] !== null) {
- ctx.drawImage($this.backgrounds[page].get(0), 0, 0, d * 1.002, d);
+ ctx.drawImage($this.backgrounds[page].get(0), 0, 0, dw * 1.002, dh);
} else {
ctx.fillStyle = "#FFFFFF";
- ctx.fillRect(0, 0, d, d);
+ ctx.fillRect(0, 0, dw, dh);
}
// Draw the texts if necessary
if ($this.getVersionToLoad(page) === 'textasvector' || $this.getVersionToLoad(page) === 'vector') {
- try {
- var img = $this.texts[page];
- if (img !== undefined && img !== null) {
- img = img.get(0);
- if (img.width === 0) {
- $this.deletePage(page);
- $this._preloadPage(page, callback);
- console.warn('failed to load page for drawing texture ', page);
- return;
+ if ($this.fluidbook.support.pdftocanvas) {
+ $this.renderPDFPageToCanvas(page, ctx, dw, dh, function () {
+ afterTexts();
+ });
+ } else {
+ try {
+ var img = $this.texts[page];
+ if (img !== undefined && img !== null) {
+ img = img.get(0);
+ if (img.width === 0) {
+ $this.deletePage(page);
+ $this._preloadPage(page, callback);
+ console.warn('failed to load page for drawing texture ', page);
+ return;
+ }
+ ctx.drawImage(img, -1, 0, dw + 2, dh);
}
- ctx.drawImage(img, -1, 0, d + 2, d);
+ } catch (e) {
+ console.warn(e);
}
- } catch (e) {
- console.warn(e);
+ afterTexts();
}
}
- // Draw content links
- if (clinks !== '') {
- $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () {
- if ($(this).is('[data-rollover-hide]')) {
- return;
- }
- if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) {
- return;
- }
+ var afterTexts = function () {
+ // Draw content links
+ if (clinks !== '') {
+ $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () {
+ if ($(this).is('[data-rollover-hide]')) {
+ return;
+ }
+ if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) {
+ return;
+ }
- let texture;
+ let texture;
- let scale = 1;
- let sx = 0;
- let sy = 0;
- let sw = 0;
- let sh = 0;
- let tw;
- let th;
+ let scale = 1;
+ let sx = 0;
+ let sy = 0;
+ let sw = 0;
+ let sh = 0;
+ let tw;
+ let th;
- if ($(this).is('[data-image]')) {
- var i = $(this).data('id');
- if (textures[i] === undefined || textures[i] === null) {
- return;
+ if ($(this).is('[data-image]')) {
+ var i = $(this).data('id');
+ if (textures[i] === undefined || textures[i] === null) {
+ return;
+ }
+ texture = textures[i].get(0);
+ tw = sw = texture.width;
+ th = sh = texture.height;
}
- texture = textures[i].get(0);
- tw = sw = texture.width;
- th = sh = texture.height;
- }
- if (enter && $(this).is('[data-animation-zoomed-out]')) {
- scale = parseFloat($(this).data('animation-zoomed-out'));
- } else if (!enter && $(this).is('[data-animation-zoomed-in]')) {
- scale = parseFloat($(this).data('animation-zoomed-in'));
- }
- let w = parseFloat($(this).css('width'));
- let h = parseFloat($(this).css('height'));
+ if (enter && $(this).is('[data-animation-zoomed-out]')) {
+ scale = parseFloat($(this).data('animation-zoomed-out'));
+ } else if (!enter && $(this).is('[data-animation-zoomed-in]')) {
+ scale = parseFloat($(this).data('animation-zoomed-in'));
+ }
+ let w = parseFloat($(this).css('width'));
+ let h = parseFloat($(this).css('height'));
- if (scale !== 1) {
- let origin = $(this).data('animation-zoomed-origin');
- origin = parseTransformOrigin(origin);
+ if (scale !== 1) {
+ let origin = $(this).data('animation-zoomed-origin');
+ origin = parseTransformOrigin(origin);
- sx = (1 - (1 / scale)) * tw * origin[0];
- sy = (1 - (1 / scale)) * th * origin[1];
- sw = tw - (sx / (1 - origin[0]));
- sh = th - (sy / (1 - origin[1]));
- }
+ sx = (1 - (1 / scale)) * tw * origin[0];
+ sy = (1 - (1 / scale)) * th * origin[1];
+ sw = tw - (sx / (1 - origin[0]));
+ sh = th - (sy / (1 - origin[1]));
+ }
- var left = (parseFloat($(this).css('left'))) * wr;
- var top = (parseFloat($(this).css('top'))) * hr;
- var width = w * wr;
- var height = h * hr;
+ var left = (parseFloat($(this).css('left'))) * wr;
+ var top = (parseFloat($(this).css('top'))) * hr;
+ var width = w * wr;
+ var height = h * hr;
- var blendmode = $(this).data('blendmode');
+ var blendmode = $(this).data('blendmode');
- if (blendmode === 'normal') {
- ctx.globalCompositeOperation = 'source-over';
- } else {
- try {
- ctx.globalCompositeOperation = blendmode;
- } catch (e) {
+ if (blendmode === 'normal') {
ctx.globalCompositeOperation = 'source-over';
+ } else {
+ try {
+ ctx.globalCompositeOperation = blendmode;
+ } catch (e) {
+ ctx.globalCompositeOperation = 'source-over';
+ }
}
- }
- if ($(this).is('[data-layer="bothsvg"]')) {
- ctx.fillStyle = '#ffffff';
- ctx.fillRect(left, top, width, height);
- }
+ if ($(this).is('[data-layer="bothsvg"]')) {
+ ctx.fillStyle = '#ffffff';
+ ctx.fillRect(left, top, width, height);
+ }
- if ($(this).is('[data-color]')) {
- ctx.fillStyle = $(this).attr('data-color');
- ctx.fillRect(left, top, width, height);
- } else if ($(this).is('[data-image]')) {
- try {
- ctx.drawImage(texture, sx, sy, sw, sh, left, top, width, height);
- if (scale != 1) {
- console.log(scale, '|', sx, sy, sw, sh, '|', tw, th, '|', left, top, width, height);
+ if ($(this).is('[data-color]')) {
+ ctx.fillStyle = $(this).attr('data-color');
+ ctx.fillRect(left, top, width, height);
+ } else if ($(this).is('[data-image]')) {
+ try {
+ ctx.drawImage(texture, sx, sy, sw, sh, left, top, width, height);
+ if (scale != 1) {
+ console.log(scale, '|', sx, sy, sw, sh, '|', tw, th, '|', left, top, width, height);
+ }
+ } catch (e) {
+ console.warn(texture);
}
- } catch (e) {
- console.warn(texture);
}
- }
- });
- $('.texture_clinks[data-page="' + page + '"]').remove();
- }
-
- // Draw the shadow if necessary
- if ($this.fluidbook.settings.shadeAlpha > 0) {
- var sw = d * .25;
- var s, x;
- if (page % 2 === 0 && $this.fluidbook.l10n.ltr || page % 2 === 1 && $this.fluidbook.l10n.rtl) {
- // Left
- s = $this.shadeLeft;
- x = 1024 - sw;
- } else {
- // Right
- s = $this.shadeRight;
- x = 0;
+ });
+ $('.texture_clinks[data-page="' + page + '"]').remove();
}
- ctx.globalAlpha = 2 * $this.fluidbook.settings.shadeAlpha / 100;
- ctx.drawImage(s.get(0), x, 0, sw, d);
- ctx.globalAlpha = 1;
- }
- try {
- let dataurl = c.toDataURL("image/png");
- var i = new Image();
- i.onload = function () {
- if (enter) {
- $this.textures[page] = i;
+ // Draw the shadow if necessary
+ if ($this.fluidbook.settings.shadeAlpha > 0) {
+ var sw = dw * .25;
+ var s, x;
+ if (page % 2 === 0 && $this.fluidbook.l10n.ltr || page % 2 === 1 && $this.fluidbook.l10n.rtl) {
+ // Left
+ s = $this.shadeLeft;
+ x = dw - sw;
} else {
- $this.leaveTextures[page] = i;
+ // Right
+ s = $this.shadeRight;
+ x = 0;
}
+ ctx.globalAlpha = 2 * $this.fluidbook.settings.shadeAlpha / 100;
+ ctx.drawImage(s.get(0), x, 0, sw, dh);
+ ctx.globalAlpha = 1;
+ }
+
+ try {
+ let dataurl = c.toDataURL("image/png");
+ var i = new Image();
+ i.onload = function () {
+ if (enter) {
+ $this.textures[page] = i;
+ } else {
+ $this.leaveTextures[page] = i;
+ }
+ callback();
+ }
+ i.src = dataurl;
+ } catch (e) {
+ console.warn(e);
callback();
}
- i.src = dataurl;
- } catch (e) {
- console.warn(e);
- callback();
- }
+ };
+
+
} else {
callback();
}
addTextContents: function (pageNr, callback) {
var t = $("#page_" + pageNr + ' .texts');
if (this.fluidbook.support.svgtocanvas || this.fluidbook.support.pdftocanvas) {
- var html = '<canvas data-page="' + pageNr + '" class="p"></canvas>';
- if (!this.fluidbook.mobilefirst.enabled) {
- html += '<canvas data-page="' + pageNr + '" class="z"></canvas>';
- }
- $(t).html(html);
-
- if (this.fluidbook.support.svgtocanvas) {
- this.renderTextsCanvas();
- } else {
- this.renderPDFTextsCanvas()
- }
} else {
$(t).append(this.texts[pageNr]);
}
return;
}
let $this = this;
- //PDFJS.disableWorker = true;
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/build/pdf.worker.js';
- let loadingTask = pdfjsLib.getDocument('data/' + this.fluidbook.settings.pdfName);
+ let loadingTask = pdfjsLib.getDocument('data/texts.pdf');
loadingTask.promise.then(function (pdfDoc) {
$this.pdfDoc = pdfDoc;
}
let $this = this;
- let upscale = 1;
- var z = window.devicePixelRatio * upscale;
- var mz = this.fluidbook.zoom.max * window.devicePixelRatio * upscale * 1.1;
+ let canvas = $this.prepareCanvas(1);
- $('canvas[data-page]:not(.thick)').each(function () {
- if ($this.fluidbook.zoom.zoom === 1 && $(this).hasClass('z')) {
- return;
- }
-
- var page = $(this).data('page');
-
- var c = $(this).closest('.texts');
- var tw = $(c).width();
- var th = $(c).height();
-
- var w = tw * z;
- var h = th * z;
- var wz = tw * mz;
- var hz = th * mz;
+ let callback = function (c) {
+ $('#currentDoublePage .page[data-page="' + c.page + '"] .texts canvas').hide();
+ $(c.canvas).show();
+ }
- var canvas = $(this).get(0);
+ $.each(canvas, function (k, c) {
+ if (c.render) {
+ $this.renderPDFPageToCanvas(c.page, c.canvas.get(0).getContext("2d"), c.cw, c.ch, function () {
+ callback(c);
+ });
+ } else {
+ callback(c);
+ }
+ });
- var cz = $(this).hasClass('z') ? mz : z;
- var cw = $(this).hasClass('z') ? wz : w;
- var ch = $(this).hasClass('z') ? hz : h;
+ },
- if ($(this).data('w') === cw && $(this).data('h') === ch) {
- return;
- }
+ prepareCanvas: function (upscale) {
- canvas.width = cw + 30;
- canvas.height = ch + 30;
+ let $this = this;
- if (cz === 1) {
- $(canvas).css('transform', null);
- } else {
- $(canvas).css('transform', 'scale(' + (1 / cz) + ')');
+ var z = window.devicePixelRatio * upscale;
+ var mz = this.fluidbook.zoom.max * z;
+ var res = [];
+ $(".doublePage .page .texts").each(function () {
+ var page = parseInt($(this).closest('.page').data('page'));
+ var cw = $(this).width();
+ var ch = $(this).height();
+ var cz = ($this.fluidbook.zoom.zoom === 1) ? z : mz;
+ cw *= cz;
+ ch *= cz;
+
+ let cacheKey = page + "/" + cw + "/" + ch;
+ let render = false;
+
+ let canvas = $(this).find('canvas[data-cache="' + cacheKey + '"]');
+ if ($(canvas).length === 0) {
+ canvas = $('<canvas data-cache="' + cacheKey + '" width="' + (cw + 30) + '" height="' + (ch + 30) + '"></canvas>');
+ $(this).append(canvas);
+ if (cz === 1) {
+ $(canvas).css('transform', null);
+ } else {
+ $(canvas).css('transform', 'scale(' + (1 / cz) + ')');
+ }
+ render = true;
}
+ res.push({page: page, canvas: canvas, render: render, cacheKey: cacheKey, cw: cw, ch: ch});
+ });
+ return res;
+ },
- var ctx = canvas.getContext("2d");
-
+ renderPDFPageToCanvas: function (page, ctx, cw, ch, callback) {
+ this.pdfDoc.getPage(page).then(function (pdfPage) {
+ var unscaledViewport = pdfPage.getViewport({scale: 1});
+ var scaleY = (ch / unscaledViewport.height);
+ var scaleX = (cw / unscaledViewport.width);
- $this.pdfDoc.getPage(page).then(function (pdfPage) {
- var unscaledViewport = pdfPage.getViewport({scale: 1});
- var scale = Math.min((ch / unscaledViewport.height), (cw / unscaledViewport.width));
+ var scale = Math.min(scaleX, scaleY);
- let renderTask = pdfPage.render({
- canvasContext: ctx,
- viewport: pdfPage.getViewport({scale: scale}),
- annotationMode: 0
- });
- renderTask.promise.then(function () {
- console.log('page ' + page + ' rendered at scale ' + scale, cw, ch, cz, unscaledViewport.width, unscaledViewport.height);
- });
- })
-
- $(this).data('w', cw).data('h', ch);
-
- // let textThickness = parseFloat($this.fluidbook.settings.textsThickness);
- //
- // if (!$(this).hasClass('z') && $this.fluidbook.settings.textsThickness > 1 && $this.fluidbook.settings.textsThicknessPages.indexOf(page) >= 0) {
- // $('canvas:not(.z)[data-page=' + page + '].thick').remove();
- // var clone;
- // for (var i = 1; i <= textThickness; i++) {
- // clone = $this._cloneCanvas($(this).get(0));
- // $(clone).insertBefore($(this));
- // }
- // var lastOpacity = $this.fluidbook.settings.textsThickness - Math.floor($this.fluidbook.settings.textsThickness);
- // if (lastOpacity > 0) {
- // $(clone).css('opacity', lastOpacity);
- // }
- // }
+ let renderTask = pdfPage.render({
+ canvasContext: ctx,
+ viewport: pdfPage.getViewport({scale: scale}),
+ background: 'rgba(0,0,0,0)',
+ annotationMode: 0
+ });
+ renderTask.promise.then(function () {
+ if (callback !== undefined) {
+ callback();
+ }
+ });
- });
+ })
},
renderTextsCanvas: function () {
-
if (!this.fluidbook.support.svgtocanvas) {
return;
}
var $this = this;
- var upscale = this.fluidbook.settings.svgToCanvasUpscale !== undefined ? parseFloat(this.fluidbook.settings.svgToCanvasUpscale) : 1;
-
- var z = window.devicePixelRatio * upscale;
- var mz = this.fluidbook.zoom.max * window.devicePixelRatio * upscale * 1.1;
-
$('canvas[data-page]:not(.thick)').each(function () {
if ($this.fluidbook.zoom.zoom === 1 && $(this).hasClass('z')) {
return;
}
-
- var page = $(this).data('page');
-
- var c = $(this).closest('.texts');
- var tw = $(c).width();
- var th = $(c).height();
-
-
- var w = tw * z;
- var h = th * z;
- var wz = tw * mz;
- var hz = th * mz;
-
- var canvas = $(this).get(0);
-
- var cz = $(this).hasClass('z') ? mz : z;
- var cw = $(this).hasClass('z') ? wz : w;
- var ch = $(this).hasClass('z') ? hz : h;
-
- if ($(this).data('w') === cw && $(this).data('h') === ch) {
+ let c = $this.prepareCanvas($(this), this.fluidbook.settings.svgToCanvasUpscale !== undefined ? parseFloat(this.fluidbook.settings.svgToCanvasUpscale) : 1);
+ if (!c.changed) {
return;
}
+ var ctx = c.canvas.getContext("2d");
- canvas.width = cw + 30;
- canvas.height = ch + 30;
-
- if (cz === 1) {
- $(canvas).css('transform', null);
- } else {
- $(canvas).css('transform', 'scale(' + (1 / cz) + ')');
- }
-
- var ctx = canvas.getContext("2d");
-
- var img = $this.texts[page];
+ var img = $this.texts[c.page];
if (img !== undefined && img !== null) {
img = img.get(0);
if (img.width === 0) {
- $this.deletePage(page);
- $this._preloadPage(page, function () {
+ $this.deletePage(c.page);
+ $this._preloadPage(c.page, function () {
});
return;
}
- ctx.drawImage(img, 0, 0, img.width - 2, img.height - 2, 0, 0, cw, ch);
+ ctx.drawImage(img, 0, 0, img.width - 2, img.height - 2, 0, 0, c.cw, c.ch);
}
- $(this).data('w', cw).data('h', ch);
-
let textThickness = parseFloat($this.fluidbook.settings.textsThickness);
if (!$(this).hasClass('z') && $this.fluidbook.settings.textsThickness > 1 && $this.fluidbook.settings.textsThicknessPages.indexOf(page) >= 0) {
projects / fluidbook-html5.git / commitdiff