FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Revert "Revert "Fix thumbnail scaling on zoomed browser""

Browse Source 
This reverts commit ebf362e9a9.
This commit is contained in:
Willem Dantuma 2020-02-26 17:21:02 +01:00
parent ebf362e9a9
commit 007448878b
2 changed files with 54 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="feature;let feature" class="row m-0">
<div class="col-3 p-1">
<canvas #canvas class="thumbnail"height="100" width="100"></canvas>
<div #container class="col-3 p-1">
<canvas #canvas class="thumbnail"></canvas>
</div>
<div class="col p-2">
<h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>

63
projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts
View File

@ -21,6 +21,7 @@ import * as style from 'ol/style';
export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent implements AfterViewInit {
@ViewChild('canvas', { static: false }) canvas;
@ViewChild('container', { static: false }) container;
constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService,config:AppConfig) {
super(store, itemTypeService,config);
@ -34,13 +35,50 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
return getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
}
render(canvas, feature:Feature) {
let vectorContext = render.toContext(canvas.getContext( '2d' ));
scaleCanvas(canvas, context, width, height) {
// assume the device pixel ratio is 1 if the browser doesn't specify it
const devicePixelRatio = window.devicePixelRatio || 1;
// determine the 'backing store ratio' of the canvas context
const backingStoreRatio = (
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1
);
// determine the actual ratio we want to draw at
const ratio = devicePixelRatio / backingStoreRatio;
if (devicePixelRatio !== backingStoreRatio) {
// set the 'real' canvas size to the higher width/height
canvas.width = width * ratio;
canvas.height = height * ratio;
// ...then scale it back down with CSS
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
}
else {
// this is a normal 1:1 device; just scale it simply
canvas.width = width;
canvas.height = height;
canvas.style.width = '';
canvas.style.height = '';
}
// scale the drawing context so everything will work at the higher ratio
context.scale(ratio, ratio);
}
let width=canvas.width;
let height = canvas.height;
render(canvas,width,height,feature:Feature) {
let canvasContext = canvas.getContext( '2d',{width:width,height:height});
this.scaleCanvas(canvas,canvasContext,width,height);
let renderContext = render.toContext(canvasContext);
let strokeStyle = new style.Style({
stroke: new style.Stroke({ color: 'black',width:2 })
stroke: new style.Stroke({ color: 'black',width:1.5 })
});
let geom = feature.getGeometry().clone(),
@ -49,8 +87,8 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
let dxy = extent.getCenter(e),
sxy = [
width / extent.getWidth(e),
height / extent.getHeight(e)
(width - 2 ) / extent.getWidth(e),
(height -2 ) / extent.getHeight(e)
];
let dx = dxy[0],
@ -59,14 +97,17 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
sy = sxy[1];
geom.translate( -dx, -dy );
geom.scale( Math.min(sx, sy), -Math.min(sx, sy) );
geom.scale( Math.min(sx, sy), -Math.min(sx, sy));
geom.translate( width / 2, height / 2 );
vectorContext.setStyle( strokeStyle );
vectorContext.drawGeometry( geom );
renderContext.setStyle( strokeStyle );
renderContext.drawGeometry( geom );
}
ngAfterViewInit() {
this.render(this.canvas.nativeElement,this.feature);
this.render(this.canvas.nativeElement,
this.container.nativeElement.offsetWidth,
this.container.nativeElement.offsetHeight,
this.feature);
}
}