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

Fix double scaling issue
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2020-02-26 19:29:34 +01:00
parent 007448878b
commit 795e8fdf0e
3 changed files with 17 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,10 @@
<div *ngIf="feature;let feature" class="row m-0">
<div #container class="col-3 p-1">
<canvas #canvas class="thumbnail"></canvas>
<div *ngIf="feature;let feature" class="d-flex m-0">
<div class="p-2">
<div #container class="thumbnail">
<canvas #canvas ></canvas>
</div>
<div class="col p-2">
</div>
<div class="flex-grow p-2 overflow-hidden">
<h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>
<div class="card-text"><span>{{areaInHa(feature)| number:'1.2-2'}} ha</span>&nbsp;<span>{{feature.get('cropTypeName')}}</span> </div>
<div class="card-text"><span>{{feature.get('datadate')|date}}</span> - <span>{{feature.get('dataenddate')|date}}</span> </div>

20
projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.scss
View File

@ -9,18 +9,10 @@
text-overflow: ellipsis;
}
.thumbnail > img {
width: 100%;
height: auto;
}
.thumbnail > div {
width: 100%;
font-size: 2rem;
text-align: center;
min-height: 3rem;
color: white;
padding-top: 0.5rem;
.card-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.col {
@ -28,7 +20,7 @@
}
.thumbnail {
width: 100%;
height: 100%;
width: 4em;
height: 4em;
}

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

@ -35,47 +35,9 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
return getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
}
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);
}
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 renderContext = render.toContext(canvas.getContext( '2d'),{ size: [width, height] });
let strokeStyle = new style.Style({
stroke: new style.Stroke({ color: 'black',width:1.5 })
@ -88,7 +50,7 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
let dxy = extent.getCenter(e),
sxy = [
(width - 2 ) / extent.getWidth(e),
(height -2 ) / extent.getHeight(e)
(height - 2 ) / extent.getHeight(e)
];
let dx = dxy[0],