Mercurial > gemma

comparison client/src/components/Pdftool.vue @ 1883:76a6d334e681 dev-pdf-generation

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
1882:d1f8ff88b180 1883:76a6d334e681
111 "will generate pdf with", 111 "will generate pdf with",
112 this.form.paperSize, 112 this.form.paperSize,
113 this.form.format 113 this.form.format
114 ); 114 );
115 var width, height; 115 var width, height;
116 // generate PDF and open it 116
117 if (this.form.format !== "portrait") { 117 if (this.form.format !== "portrait") {
118 // landscape, default 118 // landscape, default
119 width = paperSizes[this.form.paperSize][0]; 119 width = paperSizes[this.form.paperSize][0];
120 height = paperSizes[this.form.paperSize][1]; 120 height = paperSizes[this.form.paperSize][1];
121 } else { 121 } else {
127 let resolution = 120; // Dots per inch. An inch is 25.4 mm. 127 let resolution = 120; // Dots per inch. An inch is 25.4 mm.
128 128
129 // FUTURE: consider margins 129 // FUTURE: consider margins
130 console.log(width, height); 130 console.log(width, height);
131 131
132 // generate PDF and open it
133 // our units are milimeters; width 0 x height 0 is left upper corner
134
135 // Step 1 prepare and save current map extend
136 // Then add callback "rendercomplete" for Step 3
137 // which will generate the pdf and resets the map view
138 // Step 2 which starts rendering a map with the necessary image size
139
132 var map = this.openLayersMap; 140 var map = this.openLayersMap;
133 var mapSize = map.getSize(); // size in pixels of the map in the DOM 141 var mapSize = map.getSize(); // size in pixels of the map in the DOM
134 // Calculate the extent for the current view state and the passed size. 142 // Calculate the extent for the current view state and the passed size.
135 // The size is the pixel dimensions of the box into which the calculated 143 // The size is the pixel dimensions of the box into which the calculated
136 // extent should fit. 144 // extent should fit.
137 var mapExtent = map.getView().calculateExtent(mapSize); 145 var mapExtent = map.getView().calculateExtent(mapSize);
146
138 var pdf = new jsPDF(this.form.format, "mm", this.form.paperSize); 147 var pdf = new jsPDF(this.form.format, "mm", this.form.paperSize);
139 var self = this;
140 var scalebarSize = 148 var scalebarSize =
141 self.form.format === "portrait" && self.form.paperSize === "a4" 149 this.form.format === "portrait" && this.form.paperSize === "a4"
142 ? 10 150 ? 10
143 : 15; 151 : 15;
144 var northarrowSize = 3; 152 var northarrowSize = 3;
153 var self = this;
154
145 // set a callback for after the next complete rendering of the map 155 // set a callback for after the next complete rendering of the map
146 map.once("rendercomplete", function(event) { 156 map.once("rendercomplete", function(event) {
147 let canvas = event.context.canvas; 157 let canvas = event.context.canvas;
148 console.log("rendered", canvas); 158 console.log("rendered", canvas);
149 var data = canvas.toDataURL("image/png"); 159 var data = canvas.toDataURL("image/png");
150 pdf.addImage(data, "PNG", 0, 0, width, height); 160 pdf.addImage(data, "PNG", 0, 0, width, height);
161 self.addRoundedBox(
162 pdf,
163 width - scalebarSize * 5.5,
164 height - scalebarSize,
165 scalebarSize * 5,
166 scalebarSize
167 );
151 self.addScalebar( 168 self.addScalebar(
152 pdf, 169 pdf,
153 width - scalebarSize * 5, 170 width - scalebarSize * 5,
154 height - scalebarSize / 2, 171 height - scalebarSize / 2,
155 scalebarSize 172 scalebarSize
189 document.body.appendChild(a); 206 document.body.appendChild(a);
190 a.click(); 207 a.click();
191 document.body.removeChild(a); 208 document.body.removeChild(a);
192 */ 209 */
193 }, 210 },
194 211 addRoundedBox(doc, x, y, w, h) {
212 // draws a rounded background box at (x,y) width x height
213 // using jsPDF units
214 doc.setDrawColor(255, 255, 255);
215 doc.setFillColor(255, 255, 255);
216 doc.roundedRect(x, y, w, h, 3, 3, "FD");
217 },
195 addScalebar(doc, x, y, size) { 218 addScalebar(doc, x, y, size) {
196 doc.setDrawColor(255, 255, 255);
197 doc.setFillColor(255, 255, 255);
198 doc.roundedRect(x - size / 2, y - size / 2, size * 5, size, 3, 3, "FD");
199 doc.setDrawColor(0, 0, 0); 219 doc.setDrawColor(0, 0, 0);
200 doc.setFillColor(0, 0, 0); 220 doc.setFillColor(0, 0, 0);
201 doc.rect(x, y, size, 1, "FD"); 221 doc.rect(x, y, size, 1, "FD");
202 doc.setFillColor(255, 255, 255); 222 doc.setFillColor(255, 255, 255);
203 doc.setDrawColor(0, 0, 0); 223 doc.setDrawColor(0, 0, 0);