Mercurial > gemma
changeset 1884:59ef76d83de7 dev-pdf-generation
client: pdf-gen: make scalebar dynamic
* Add calculations so that the bar scale will have the right text
labels for the distance in meters.
* Use print selected print resolution and add 80 dpi as additional value.
* (cleanup) Remove unused and unneeded function this.addImage().
* Use better variable names for the different "resolutions".
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 16 Jan 2019 22:19:50 +0100 |
parents | 76a6d334e681 |
children | 7824413a4e10 |
files | client/src/components/Pdftool.vue |
diffstat | 1 files changed, 27 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue Wed Jan 16 20:58:59 2019 +0100 +++ b/client/src/components/Pdftool.vue Wed Jan 16 22:19:50 2019 +0100 @@ -22,6 +22,7 @@ <option value="portrait"><translate>portrait</translate></option> </select> <select v-model="form.resolution" class="form-control d-block w-100"> + <option value="80">80 dpi</option> <option value="120">120 dpi</option> <option value="200">200 dpi</option> </select> @@ -110,7 +111,8 @@ console.log( "will generate pdf with", this.form.paperSize, - this.form.format + this.form.format, + this.form.resolution ); var width, height; @@ -124,11 +126,17 @@ height = paperSizes[this.form.paperSize][0]; } - let resolution = 120; // Dots per inch. An inch is 25.4 mm. - // FUTURE: consider margins console.log(width, height); + // dots per mm = dots per inch / (25.4 mm/inch) + var pixelsPerMapMillimeter = this.form.resolution / 25.4; + var mapSizeForPrint = [ + // in pixel + Math.round(width * pixelsPerMapMillimeter), + Math.round(height * pixelsPerMapMillimeter) + ]; + // generate PDF and open it // our units are milimeters; width 0 x height 0 is left upper corner @@ -155,7 +163,11 @@ // 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); + let view = map.getView(); + let metersPerPixel = // meters (reality) per pixel (map) + view.getResolution() * view.getProjection().getMetersPerUnit(); + console.log("metersPerPixel = ", metersPerPixel); + var data = canvas.toDataURL("image/png"); pdf.addImage(data, "PNG", 0, 0, width, height); self.addRoundedBox( @@ -169,7 +181,8 @@ pdf, width - scalebarSize * 5, height - scalebarSize / 2, - scalebarSize + scalebarSize, + scalebarSize * pixelsPerMapMillimeter * metersPerPixel ); //self.addText(pdf, 150, 20, 10, "black", 70, "some text"); self.addNorthArrow(pdf, 15, 8, northarrowSize); @@ -182,10 +195,6 @@ }); // trigger rendering - var mapSizeForPrint = [ - Math.round((width * resolution) / 25.4), - Math.round((height * resolution) / 25.4) - ]; map.setSize(mapSizeForPrint); map.getView().fit(mapExtent, { size: mapSizeForPrint }); @@ -215,7 +224,8 @@ doc.setFillColor(255, 255, 255); doc.roundedRect(x, y, w, h, 3, 3, "FD"); }, - addScalebar(doc, x, y, size) { + addScalebar(doc, x, y, size, realLength) { + // realLength as number in meters (reality) doc.setDrawColor(0, 0, 0); doc.setFillColor(0, 0, 0); doc.rect(x, y, size, 1, "FD"); @@ -227,9 +237,13 @@ doc.rect(x + size * 2, y, size * 2, 1, "FD"); doc.setFontSize(5); doc.text(x, y + 3, "0"); - doc.text(x + size, y + 3, "50"); - doc.text(x + size * 2, y + 3, "100"); - doc.text(x + size * 4, y + 3, "200 m"); + doc.text(x + size, y + 3, Math.round(realLength).toString()); + doc.text(x + size * 2, y + 3, Math.round(realLength * 2).toString()); + doc.text( + x + size * 4, + y + 3, + Math.round(realLength * 4).toString() + " m" + ); }, addNorthArrow(doc, x1, y1, size) { @@ -257,12 +271,6 @@ doc.setFontStyle("normal"); doc.text(size < 3 ? x1 - 0.5 : x1 - 1.3, y3 + 1, "N"); }, - - //export an image to PDF - addImage(doc, img, type, x, y, width, hight) { - doc.addImage(img, type, x, y, width, hight); - }, - // add some text at specific coordinates and determine how many wrolds in single line addText(doc, postitionX, positionY, size, color, lineWidth, text) { // split the incoming string to an array, each element is a string of words in a single line