diff client/src/components/Pdftool.vue @ 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 20fe31b4dd5d
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