hourly graph uses image with internal canvas for drawing
This commit is contained in:
parent
64fb06d7b4
commit
69d14236f1
|
@ -42,18 +42,20 @@ class HourlyGraph extends WeatherDisplay {
|
|||
}
|
||||
|
||||
drawCanvas() {
|
||||
if (!this.canvas) this.canvas = this.elem.querySelector('.chart canvas');
|
||||
if (!this.image) this.image = this.elem.querySelector('.chart img');
|
||||
|
||||
// get available space
|
||||
const boundingRect = this.canvas.getBoundingClientRect();
|
||||
const availableWidth = boundingRect.width;
|
||||
const availableHeight = boundingRect.height;
|
||||
const availableWidth = 532;
|
||||
const availableHeight = 285;
|
||||
|
||||
this.canvas.width = availableWidth;
|
||||
this.canvas.height = availableHeight;
|
||||
this.image.width = availableWidth;
|
||||
this.image.height = availableHeight;
|
||||
|
||||
// get context
|
||||
const ctx = this.canvas.getContext('2d');
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = availableWidth;
|
||||
canvas.height = availableHeight;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
|
||||
// calculate time scale
|
||||
|
@ -97,6 +99,9 @@ class HourlyGraph extends WeatherDisplay {
|
|||
this.elem.querySelector('.y-axis .l-2').innerHTML = midTemp;
|
||||
this.elem.querySelector('.y-axis .l-3').innerHTML = minTemp;
|
||||
|
||||
// set the image source
|
||||
this.image.src = canvas.toDataURL();
|
||||
|
||||
super.drawCanvas();
|
||||
this.finishDraw();
|
||||
}
|
||||
|
|
|
@ -367,8 +367,6 @@ class Radar extends WeatherDisplay {
|
|||
}
|
||||
|
||||
RadarContext.putImageData(RadarImageData, 0, 0);
|
||||
|
||||
// MapContext.drawImage(RadarContext.canvas, 0, 0);
|
||||
}
|
||||
|
||||
static mergeDopplerRadarImage(mapContext, radarContext) {
|
||||
|
|
|
@ -89,7 +89,7 @@
|
|||
top: 0px;
|
||||
left: 50px;
|
||||
|
||||
canvas {
|
||||
img {
|
||||
width: 532px;
|
||||
height: 285px;
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<div class="label l-3">55</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<canvas id="chart-area"></canvas>
|
||||
<img id="chart-area"></img>
|
||||
</div>
|
||||
<div class="x-axis">
|
||||
<div class="label l-1">12a</div>
|
||||
|
|
Loading…
Reference in a new issue