Mercurial > gemma
changeset 1883:76a6d334e681 dev-pdf-generation
Client: pdf-gen: refactor addScaleBar
* Change positioning from center to left-upper corner for a new
function addRoundedBox() that is now used before addScaleBar().
This is easier to calculate and is more like the model of jsPDF.
* Add more comments to show how this works.
* Move saving of the current vue instance to be the last command
before the callback is set.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 16 Jan 2019 20:58:59 +0100 |
parents | d1f8ff88b180 |
children | 59ef76d83de7 |
files | client/src/components/Pdftool.vue |
diffstat | 1 files changed, 26 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue Wed Jan 16 15:46:57 2019 +0100 +++ b/client/src/components/Pdftool.vue Wed Jan 16 20:58:59 2019 +0100 @@ -113,7 +113,7 @@ this.form.format ); var width, height; - // generate PDF and open it + if (this.form.format !== "portrait") { // landscape, default width = paperSizes[this.form.paperSize][0]; @@ -129,25 +129,42 @@ // FUTURE: consider margins console.log(width, height); + // generate PDF and open it + // our units are milimeters; width 0 x height 0 is left upper corner + + // Step 1 prepare and save current map extend + // Then add callback "rendercomplete" for Step 3 + // which will generate the pdf and resets the map view + // Step 2 which starts rendering a map with the necessary image size + var map = this.openLayersMap; var mapSize = map.getSize(); // size in pixels of the map in the DOM // Calculate the extent for the current view state and the passed size. // The size is the pixel dimensions of the box into which the calculated // extent should fit. var mapExtent = map.getView().calculateExtent(mapSize); + var pdf = new jsPDF(this.form.format, "mm", this.form.paperSize); - var self = this; var scalebarSize = - self.form.format === "portrait" && self.form.paperSize === "a4" + this.form.format === "portrait" && this.form.paperSize === "a4" ? 10 : 15; var northarrowSize = 3; + var self = this; + // set a callback for after the next complete rendering of the map map.once("rendercomplete", function(event) { let canvas = event.context.canvas; console.log("rendered", canvas); var data = canvas.toDataURL("image/png"); pdf.addImage(data, "PNG", 0, 0, width, height); + self.addRoundedBox( + pdf, + width - scalebarSize * 5.5, + height - scalebarSize, + scalebarSize * 5, + scalebarSize + ); self.addScalebar( pdf, width - scalebarSize * 5, @@ -191,11 +208,14 @@ document.body.removeChild(a); */ }, - - addScalebar(doc, x, y, size) { + addRoundedBox(doc, x, y, w, h) { + // draws a rounded background box at (x,y) width x height + // using jsPDF units doc.setDrawColor(255, 255, 255); doc.setFillColor(255, 255, 255); - doc.roundedRect(x - size / 2, y - size / 2, size * 5, size, 3, 3, "FD"); + doc.roundedRect(x, y, w, h, 3, 3, "FD"); + }, + addScalebar(doc, x, y, size) { doc.setDrawColor(0, 0, 0); doc.setFillColor(0, 0, 0); doc.rect(x, y, size, 1, "FD");